/* ==========================================================================
   Design tokens — Girgis Adel portfolio
   The ONLY place colors, fonts, sizes, radii, shadows and motion are defined.
   Dark is the default; light is opt-in via [data-theme="light"].
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Surfaces (dark) --------------------------------------------------- */
  --bg:            #08090c;   /* page ground */
  --bg-raised:     #0e1015;   /* bands, footer */
  --surface:       #13161d;   /* cards, inputs */
  --surface-hover: #181c25;
  --line:          rgba(255, 255, 255, 0.07);  /* hairlines */
  --line-strong:   rgba(255, 255, 255, 0.13);
  --dash-track:    rgba(255, 255, 255, 0.22);  /* headline progress dashes */

  /* --- Text -------------------------------------------------------------- */
  --text:          #edeef2;   /* 17.4:1 on --bg */
  --text-2:        #a4a9b7;   /*  8.3:1 — body secondary */
  --text-3:        #7d8393;   /*  5.0:1 — metadata only */

  /* --- Accent: one refined violet --------------------------------------- */
  --accent:        #8b7cf6;   /* links, focus, the one glow */
  --accent-text:   #a99ffb;   /* accent used as text on dark (7.4:1) */
  --accent-fill:   #6d5df0;   /* primary button fill (white text 4.9:1) */
  --accent-fill-hover: #7b6cf4;
  --accent-soft:   rgba(139, 124, 246, 0.12);
  --accent-glow:   rgba(139, 124, 246, 0.22);
  --on-accent:     #ffffff;

  /* --- Status law: a project's status owns ONE color, everywhere -------- */
  --status-live:      #3fb97a;  /* Published on Play / Live on the web */
  --status-delivered: #5aa2ff;  /* Delivered to a client */
  --status-testing:   #e0a23b;  /* In testing — not released yet */
  --status-internal:  #8b93a5;  /* Internal tool / Prototype */

  /* --- Type --------------------------------------------------------------- */
  --font-sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* code, versions, package names ONLY */
  --font-ar:    "Cairo", "Geist", system-ui, sans-serif;
  --font-ar-display: "Cairo", system-ui, sans-serif;

  /* fluid scale (min @ 360px → max @ 1280px) */
  --fs-xs:   0.8125rem;                                   /* 13 */
  --fs-sm:   0.875rem;                                    /* 14 */
  --fs-base: 1rem;                                        /* 16 */
  --fs-md:   clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);  /* 17→19 lead */
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);      /* 20→24 */
  --fs-xl:   clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);    /* 26→36 section */
  --fs-2xl:  clamp(2.375rem, 1.6rem + 3.4vw, 4.25rem);    /* 38→68 hero */

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.65;
  --track-display: -0.035em;
  --track-tight:   -0.015em;

  /* --- Space (4px base) --------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;
  --section-gap: clamp(4.5rem, 3rem + 6vw, 8rem);

  /* --- Layout ------------------------------------------------------------- */
  --container: 72rem;      /* 1152px */
  --container-narrow: 46rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --nav-h: 3.75rem;

  /* --- Shape & depth ------------------------------------------------------ */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.7);

  /* --- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out */
  --dur-1: 140ms;  --dur-2: 260ms;  --dur-3: 700ms;
}

[data-theme="light"] {
  color-scheme: light;

  --bg:            #fbfbfc;
  --bg-raised:     #f4f5f7;
  --surface:       #ffffff;
  --surface-hover: #f7f7f9;
  --line:          rgba(12, 14, 22, 0.08);
  --line-strong:   rgba(12, 14, 22, 0.15);
  --dash-track:    rgba(12, 14, 22, 0.2);

  --text:          #0b0d12;   /* 18.9:1 */
  --text-2:        #4a5060;   /*  8.0:1 */
  --text-3:        #656b7a;   /*  5.4:1 */

  --accent:        #5b4be0;
  --accent-text:   #4b3bd0;   /* 7.2:1 on --bg */
  --accent-fill:   #5b4be0;
  --accent-fill-hover: #4f3fd6;
  --accent-soft:   rgba(91, 75, 224, 0.08);
  --accent-glow:   rgba(91, 75, 224, 0.14);

  /* darker than the dark-theme values so 12px badge text on its 12% tint stays ≥ 4.5:1 (axe-checked) */
  --status-live:      #156b43;
  --status-delivered: #1b4fa6;
  --status-testing:   #7d4a06;
  --status-internal:  #4b5162;

  --shadow-1: 0 1px 2px rgba(12, 14, 22, 0.06);
  --shadow-2: 0 8px 24px -10px rgba(12, 14, 22, 0.14), 0 2px 6px -2px rgba(12, 14, 22, 0.06);
  --shadow-3: 0 24px 60px -24px rgba(12, 14, 22, 0.22);
}

/* Arabic switches the font stacks; everything else is shared. */
:root[lang="ar"] {
  --font-sans: var(--font-ar);
  --fs-sm: 0.9375rem;          /* Cairo reads small: 15px instead of 14px */
  --track-display: 0;          /* never letter-space Arabic */
  --track-tight: 0;
  --lh-tight: 1.35;
  --lh-body: 1.8;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}