/* ==========================================================================
   Design tokens, the single source of truth for every page of the site.
   Layer 1 (primitives) holds raw values. Layer 2 (semantic) says what a value
   is for. Components only use layer 2. Documented in DESIGN-SYSTEM.md.
   ========================================================================== */
:root{
  /* ---- 1. Primitives ---------------------------------------------------- */
  --neutral-0:#000000;
  --neutral-50:#0a0a0b;
  --neutral-100:#111113;
  --neutral-150:#1d1d1f;
  --neutral-200:#2c2c2e;
  --neutral-300:#3a3a3c;
  --neutral-500:#86868b;
  --neutral-600:#a1a1a6;
  --neutral-700:#6e6e73;
  --neutral-800:#d2d2d7;
  --neutral-900:#424245;
  --neutral-950:#1d1d1f;
  --white:#ffffff;
  --snow:#f5f5f7;            /* softened white for text on black */

  --blue-300:#7b93ff;
  --blue-400:#5b7cff;
  --blue-500:#3a62f5;
  --blue-600:#2c4fe0;
  --blue-700:#1d3bd1;
  --blue-800:#1a2fa8;
  --blue-950:#0b1340;

  /* Project palette: PRISMA (Material Design 3 baseline, dark scheme) */
  --purple-100:#eaddff;
  --purple-200:#d0bcff;
  --purple-600:#6750a4;
  --purple-700:#4f378b;
  --purple-900:#381e72;
  --purple-950:#21005d;
  --mauve-700:#4a4458;
  --mauve-100:#e8def8;
  --rose-200:#ffb1c8;
  --rose-800:#5a2a3d;
  --rose-950:#5e1133;

  --white-a04:rgb(255 255 255 / .04);
  --white-a08:rgb(255 255 255 / .08);
  --white-a13:rgb(255 255 255 / .13);
  --white-a25:rgb(255 255 255 / .25);
  --black-a40:rgb(0 0 0 / .4);
  --black-a60:rgb(0 0 0 / .6);
  --black-a80:rgb(0 0 0 / .8);
  --ink-a72:rgb(18 18 20 / .72);

  /* ---- 2. Semantic: color ---------------------------------------------- */
  --color-bg:var(--neutral-0);
  --color-surface:var(--neutral-100);
  --color-surface-raised:var(--neutral-150);
  --color-surface-glass:var(--white-a08);
  --color-surface-inverse:var(--white);

  --color-text:var(--snow);
  --color-text-secondary:var(--neutral-800);
  --color-text-muted:var(--neutral-600);
  --color-text-subtle:var(--neutral-500);
  --color-text-inverse:var(--neutral-950);
  --color-text-inverse-secondary:var(--neutral-900);
  --color-text-inverse-muted:var(--neutral-700);

  --color-border-subtle:var(--white-a08);
  --color-border:var(--white-a13);
  --color-border-strong:var(--white-a25);
  --color-divider:var(--neutral-200);

  /* Accent: the one brand color. A case study may re-point these four
     tokens to its own product color (see "Project theming"). */
  --color-accent:var(--blue-500);
  --color-accent-hover:var(--blue-600);
  --color-accent-text:var(--blue-300);   /* accent as text on dark: 7.5:1 on bg, 6.0:1 on surface */
  --color-on-accent:var(--white);
  --color-accent-deep:var(--blue-800);
  --color-accent-deeper:var(--blue-950);

  --color-focus:var(--blue-300);
  --color-overlay:var(--black-a60);
  --color-scrim:var(--black-a80);
  --color-chrome:var(--ink-a72);         /* translucent nav material */
  --color-highlight:var(--white-a04);    /* top inner light on surfaces */

  --gradient-accent:linear-gradient(150deg,var(--color-accent),var(--color-accent-deep));
  --gradient-accent-deep:linear-gradient(160deg,var(--color-accent-deep) 0%,var(--color-accent-deeper) 60%,var(--neutral-0) 100%);
  --gradient-band:radial-gradient(80% 60% at 50% 0%,var(--neutral-150),var(--neutral-0) 70%);
  --gradient-glow:radial-gradient(closest-side,color-mix(in srgb,var(--color-accent) 35%,transparent),color-mix(in srgb,var(--color-accent) 8%,transparent) 60%,transparent);
  --gradient-case-fade:linear-gradient(180deg,var(--black-a60) 0%,rgb(0 0 0 / .1) 28%,var(--black-a80) 62%,var(--neutral-0) 100%);  /* case heroes carry title + intro + facts */
  --gradient-hero-fade:linear-gradient(180deg,var(--black-a60) 0%,rgb(0 0 0 / .15) 30%,var(--black-a60) 70%,var(--neutral-0) 100%);

  /* ---- 2. Semantic: typography ----------------------------------------- */
  --font-sans:Inter,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;

  --text-display:clamp(48px,7.6vw,104px); /* page heroes */
  --text-h1:clamp(40px,5.6vw,76px);      /* page headline, big stats */
  --text-h2:clamp(32px,4.4vw,56px);      /* section titles */
  --text-title:clamp(22px,2.6vw,32px);   /* h3, quotes, persona name */
  --text-h4:clamp(19px,1.6vw,22px);     /* card titles */
  --text-lead:clamp(19px,1.7vw,23px);
  --text-body:17px;
  --text-ui:16px;                        /* nav, buttons */
  --text-sm:15px;                        /* meta, captions, dense lists */
  --text-xs:13px;                        /* eyebrows, labels */

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --leading-display:1.04;
  --leading-tight:1.1;
  --leading-snug:1.35;
  --leading-base:1.6;

  --tracking-display:-.035em;
  --tracking-tight:-.022em;
  --tracking-snug:-.011em;
  --tracking-wide:.06em;
  --tracking-wider:.12em;
  --measure:62ch;                        /* comfortable line length */

  /* ---- 2. Semantic: space (4 pt grid) ---------------------------------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-28:112px;
  --space-32:128px;
  --space-40:160px;

  --section-y:clamp(96px,11vw,160px);
  --gutter:var(--space-6);
  --container:1240px;
  --container-text:760px;
  --nav-h:72px;                         /* floating capsule: 12 offset + 54 tall + air */

  /* ---- 2. Semantic: shape --------------------------------------------- */
  --radius-xs:6px;      /* focus ring */
  --radius-sm:12px;     /* thumbnails, inner boxes */
  --radius-md:22px;     /* cards, media */
  --radius-lg:28px;     /* project cards, persona */
  --radius-pill:999px;
  --radius-round:50%;
  --border-width:1px;

  /* ---- 2. Semantic: elevation ----------------------------------------- */
  --shadow-float:0 30px 40px var(--black-a60);
  --shadow-card:0 1px 0 var(--color-highlight) inset,0 20px 40px -24px var(--black-a80);
  --shadow-lift:0 1px 0 var(--color-highlight) inset,0 40px 80px -32px rgb(0 0 0 / .9);

  /* ---- 2. Semantic: motion -------------------------------------------- */
  /* By intent: pick the token for what is happening, never by "size" */
  --duration-press:160ms;   /* :active feedback on anything pressable */
  --duration-hover:200ms;   /* color / background on hover */
  --duration-exit:300ms;    /* things returning to rest; always faster than enter */
  --duration-enter:800ms;   /* content arriving once per visit (reveal, hero) */
  --duration-media:700ms;   /* image zoom in on hover (exit uses --duration-exit) */
  --duration-page:250ms;    /* cross-page fade */
  --duration-morph:450ms;   /* card image -> case hero image */
  /* Legacy names, kept so existing rules read the same */
  --duration-fast:var(--duration-hover);
  --duration-base:var(--duration-exit);
  --duration-slow:var(--duration-enter);
  --ease-out:cubic-bezier(.16,1,.3,1);      /* enter / exit: quick start, long settle */
  --ease-in-out:cubic-bezier(.77,0,.175,1); /* movement across the screen (page morph, image reveal) */
  --ease-standard:cubic-bezier(.25,.1,.25,1);

  /* ---- 2. Semantic: layers -------------------------------------------- */
  --z-raised:2;
  --z-nav:50;
  --z-skip:100;

  /* Breakpoints (documented; CSS custom properties can't be used in
     @media): md = 900px, sm = 600px. */
}
/* ---- Project theming ---------------------------------------------------
   A case study may re-point the accent tokens to its product's color. Only
   the accent family changes; surfaces, type, space and shape stay the same.
   ------------------------------------------------------------------------ */
[data-theme="prisma"]{
  --color-accent:var(--purple-600);
  --color-accent-hover:var(--purple-700);
  --color-accent-text:var(--purple-200);
  --color-on-accent:var(--white);
  --color-accent-deep:var(--purple-700);
  --color-accent-deeper:var(--purple-950);
  /* M3 roles the PRISMA content uses (chips, chat bubbles, pain points) */
  --color-accent-strong:var(--purple-200);
  --color-on-accent-strong:var(--purple-900);
  --color-accent-container:var(--purple-700);
  --color-on-accent-container:var(--purple-100);
  --color-secondary-container:var(--mauve-700);
  --color-on-secondary-container:var(--mauve-100);
  --color-negative:var(--rose-200);
  --color-negative-container:var(--rose-800);
  --color-on-negative:var(--rose-950);
}

@media (max-width:600px){
  :root{
    --text-ui:15px;
    --section-y:var(--space-20);
    --gutter:var(--space-5);
  }
}