/* =========================================================
   DESIGN TOKENS
   Source of truth for the visual system.
   Do not introduce arbitrary values when an existing token
   can be used.
   ========================================================= */

:root {

  /* =======================================================
     COLOR SYSTEM
     ======================================================= */

  /* Core surfaces */

  --color-ground: #0A0A0C;
  /* Primary page background.
     Graphite, warm-neutral. */

  --color-raised: #141416;
  /* Elevated surfaces, cards, overlays, secondary sections. */

  --color-slot: #2A2A2C;
  /* Empty image/media placeholders only. */


  /* Text */

  --color-text-primary: #F2EFEA;
  /* Primary text.
     Warm off-white. */

  --color-text-secondary: #BDB9B3;
  /* Secondary text, descriptions, supporting content. */

  --color-text-muted: #8C8A87;
  /* Metadata only.
     Use at 14px and below. */


  /* Lines & borders */

  --color-line: rgba(242, 239, 234, 0.14);


  /* Accent */

  --color-accent: #F2607F;
  /* Primary accent on dark backgrounds.
     Contrast ratio: approximately 6.3:1 */

  --color-accent-deep: #C22A50;
  /* Accent for light backgrounds.
     Contrast ratio: approximately 5.6:1 */


  /* =======================================================
     PRISM / DISPERSION SYSTEM

     IMPORTANT:
     These colors are reserved for the brand mark,
     dispersion effects and intentional generative visuals.

     Do NOT use these as random UI colors.
     ======================================================= */

  --color-prism-1: #1E2A78;
  --color-prism-2: #2F5FD0;
  --color-prism-3: #2FA7C4;
  --color-prism-4: #63BE6E;
  --color-prism-5: #E3C64B;
  --color-prism-6: #E8834B;
  --color-prism-7: #E2436B;

  --gradient-prism: linear-gradient(
    90deg,
    var(--color-prism-1) 0%,
    var(--color-prism-2) 18%,
    var(--color-prism-3) 36%,
    var(--color-prism-4) 53%,
    var(--color-prism-5) 70%,
    var(--color-prism-6) 85%,
    var(--color-prism-7) 100%
  );


  /* =======================================================
     TYPOGRAPHY
     ======================================================= */

  --font-serif:
    'Libertinus Serif',
    Georgia,
    serif;

  --font-sans:
    'Roboto',
    Arial,
    sans-serif;

  --font-mono:
    'Roboto Mono',
    ui-monospace,
    monospace;


  /* =======================================================
     TYPE SCALE
     ======================================================= */

  /* Display */

  --font-size-display-1:
    clamp(40px, 7vw, 110px);

  --font-size-display-2:
    clamp(30px, 4.2vw, 58px);

  --font-size-display-3:
    clamp(26px, 3.2vw, 42px);


  /* Body */

  --font-size-body-lg: 17px;
  --font-size-body: 14px;


  /* Metadata */

  --font-size-meta: 11px;


  /* =======================================================
     LAYOUT
     ======================================================= */

  --layout-margin: 40px;

  --layout-max-width: 1400px;

  --space-unit: 8px;


  /* Spacing scale */

  --space-1: calc(var(--space-unit) * 1);  /* 8px */
  --space-2: calc(var(--space-unit) * 2);  /* 16px */
  --space-3: calc(var(--space-unit) * 3);  /* 24px */
  --space-4: calc(var(--space-unit) * 4);  /* 32px */
  --space-5: calc(var(--space-unit) * 5);  /* 40px */
  --space-6: calc(var(--space-unit) * 6);  /* 48px */
  --space-8: calc(var(--space-unit) * 8);  /* 64px */
  --space-10: calc(var(--space-unit) * 10); /* 80px */
  --space-12: calc(var(--space-unit) * 12); /* 96px */
  --space-16: calc(var(--space-unit) * 16); /* 128px */


  /* =======================================================
     SHAPE
     ======================================================= */

  --radius-none: 0px;

  --radius-pill: 999px;


  /* =======================================================
     MOTION
     ======================================================= */

  --ease-primary:
    cubic-bezier(0.16, 1, 0.3, 1);

}


/* =========================================================
   EXTENSIONS
   Everything above is the system as authored. Everything
   below exists because the site calls it and would break
   without it. Kept separate so the boundary stays visible.
   ========================================================= */

:root {

  /* Light ground. Four sections stand on it: the intro screen,
     "Three ways I approach product problems", the closing, and
     Story 1's light chapter. --color-accent-deep already assumes
     light backgrounds exist; this is the surface they use. */

  --color-paper: #F6F4EF;
  --color-paper-2: #EEEBE3;


  /* Second line weight, for separation inside one group as
     opposed to a real division. 26 uses. */

  --color-line-2: rgba(242, 239, 234, 0.07);


  /* Measured scrollbar width, written by main.js. Full-bleed
     elements subtract it, because 100vw includes the scrollbar
     and pushes the page sideways. */

  --sbw: 0px;


  /* The page's single channel. Reproduces the effective margin
     of .w so full-bleed elements align to the content instead
     of inventing their own edge. */

  --gut: max(var(--layout-margin),
    calc((100% - var(--layout-max-width)) / 2 + var(--layout-margin)));


  /* The prism as the homepage uses it: the same seven colours,
     with transparent stops at both ends so the glow fades into
     the ground instead of stopping at a hard edge. */

  --gradient-prism-fade: linear-gradient(
    90deg,
    rgba(10, 10, 12, 0) 0%,
    var(--color-prism-1) 12%,
    var(--color-prism-2) 26%,
    var(--color-prism-3) 38%,
    var(--color-prism-4) 53%,
    var(--color-prism-5) 70%,
    var(--color-prism-6) 85%,
    var(--color-prism-7) 96%,
    rgba(10, 10, 12, 0) 100%
  );


  /* =======================================================
     ALIASES

     The site makes 407 var() calls across five files under the
     older names. Renaming them all at once is the fastest way
     to break something without noticing, so the old names
     resolve to the new values and the rename can happen file
     by file, with a check after each.
     ======================================================= */

  --dark: var(--color-ground);
  --dark-2: var(--color-raised);
  --dark-3: var(--color-slot);
  --img: var(--color-raised);
  --paper: var(--color-paper);
  --paper-2: var(--color-paper-2);
  --paper-p: var(--color-text-primary);
  --ground: var(--color-ground);

  --ink: var(--color-text-primary);
  --ink-2: var(--color-text-secondary);
  --mid: var(--color-text-muted);

  --line: var(--color-line);
  --line-2: var(--color-line-2);

  --red: var(--color-accent-deep);
  --red-l: var(--color-accent);

  --serif: var(--font-serif);
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  --m: var(--layout-margin);
  --maxw: var(--layout-max-width);
  --spectrum: var(--gradient-prism-fade);

}


/* The case studies run a narrower measure than the homepage:
   a fluid margin instead of a fixed 40px, and a 1280px container.
   Scoped here rather than duplicated in three files. */

html.case-study {
  --layout-margin: clamp(20px, 5.2vw, 96px);
  --layout-max-width: 1280px;
}