/* =============================================================
   tokens.css — Design tokens for othmanbenomar.dev
   Visual direction: calm, technical, generous whitespace.
   No Nicepage. No jQuery. No framework. Hand-rolled only.
   ============================================================= */

:root {
  /* -----------------------------------------------------------
     Color palette — light mode
  ----------------------------------------------------------- */
  --color-bg:           #f8f9fb;   /* page background */
  --color-surface:      #ffffff;   /* card / panel background */
  --color-surface-alt:  #f0f2f5;   /* subtle alternate surface */
  --color-border:       #dde1e7;   /* dividers, card outlines */
  --color-text:         #1a1d23;   /* primary body text */
  --color-text-muted:   #5c6370;   /* secondary / meta text */
  --color-text-inverse: #ffffff;   /* text on dark backgrounds */

  /* Accent — steel blue (calm, technical) */
  --color-accent:       #2b6cb0;
  --color-accent-light: #4299e1;
  --color-accent-strong:#1a4d8f;
  --color-accent-bg:    #ebf4ff;   /* accent tint for highlights */

  /* Semantic */
  --color-success:      #276749;
  --color-warning:      #975a16;
  --color-danger:       #c53030;
  --color-info:         #2b6cb0;

  /* -----------------------------------------------------------
     Typography
  ----------------------------------------------------------- */
  --font-sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif, "Apple Color Emoji";
  --font-mono:   "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
                 Courier, monospace;

  /* Font sizes — minor-third scale (×1.25) */
  --text-xs:   0.64rem;   /* ~10px */
  --text-sm:   0.8rem;    /* ~13px */
  --text-base: 1rem;      /* 16px  */
  --text-lg:   1.25rem;   /* 20px  */
  --text-xl:   1.563rem;  /* 25px  */
  --text-2xl:  1.953rem;  /* 31px  */
  --text-3xl:  2.441rem;  /* 39px  */
  --text-4xl:  3.052rem;  /* 49px  */

  /* Line heights */
  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Font weights */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* -----------------------------------------------------------
     Spacing scale — 4-point grid
  ----------------------------------------------------------- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* -----------------------------------------------------------
     Border radii
  ----------------------------------------------------------- */
  --radius-sm:   0.25rem;  /*  4px */
  --radius-md:   0.5rem;   /*  8px */
  --radius-lg:   1rem;     /* 16px */
  --radius-xl:   1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* -----------------------------------------------------------
     Shadows
  ----------------------------------------------------------- */
  --shadow-sm:  0 1px 2px 0 rgba(0,0,0,0.06), 0 1px 3px 0 rgba(0,0,0,0.04);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04);
  --shadow-focus: 0 0 0 3px rgba(43,108,176,0.35);

  /* -----------------------------------------------------------
     Z-index scale
  ----------------------------------------------------------- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-nav:      50;

  /* -----------------------------------------------------------
     Container / breakpoint widths
     Breakpoints (comment reference only — use in media queries):
       xs:  0–575px   (mobile portrait)
       sm:  576–767px (mobile landscape)
       md:  768–991px (tablet)
       lg:  992–1199px (desktop)
       xl:  1200px+  (wide)
  ----------------------------------------------------------- */
  --container-sm:  540px;
  --container-md:  720px;
  --container-lg:  960px;
  --container-xl: 1140px;

  /* -----------------------------------------------------------
     Transitions
  ----------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}

/* -----------------------------------------------------------
   Dark mode overrides
   (only color tokens need overriding — space/type/shadow stay)
----------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #0f1117;
    --color-surface:      #1a1d23;
    --color-surface-alt:  #22262e;
    --color-border:       #2e3340;
    --color-text:         #e8eaf0;
    --color-text-muted:   #9aa3b2;
    --color-text-inverse: #0f1117;

    --color-accent:       #4299e1;
    --color-accent-light: #63b3ed;
    --color-accent-strong:#2b6cb0;
    --color-accent-bg:    #1a2d45;

    --color-success:      #48bb78;
    --color-warning:      #f6ad55;
    --color-danger:       #fc8181;
    --color-info:         #63b3ed;

    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.30), 0 1px 3px 0 rgba(0,0,0,0.20);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.35), 0 2px 4px -1px rgba(0,0,0,0.20);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.40), 0 4px 6px -2px rgba(0,0,0,0.20);
  }
}

/* -----------------------------------------------------------
   Reduced-motion: disable transitions and animations
   for users who prefer reduced motion.
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   0ms;
    --transition-normal: 0ms;
    --transition-slow:   0ms;
  }
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto  !important;
  }
}