/* Purpose: design tokens. Single source of truth for every value in the theme.
   Sizes, spacing, radii and durations stay on the 4 point scale; the palette is
   a jewel-toned editorial system where each chapter of the page owns a colour. */

:root {
  /* ---------------------------------------------------------------
     GROUND - the architecture the room is built from
     --------------------------------------------------------------- */
  --c-obsidian: #090A0C;
  --c-charcoal: #111318;
  --c-warm-black: #181A1F;
  --c-ink-raise: #20242B;

  --c-paper: #F1EDE3;
  --c-ivory: #FAF7F0;
  --c-paper-ink: #14161A;
  --c-paper-ink-2: #2C3138;
  --c-paper-muted: #6B6357;
  --c-paper-label: #5C5348;
  --c-paper-line: #D8D2C4;

  /* ---------------------------------------------------------------
     BRASS - the hardware
     --------------------------------------------------------------- */
  --c-brass: #C69749;
  --c-brass-hi: #E8C889;
  --c-brass-lo: #72552A;
  --c-brass-ink: #8A6C31;   /* brass that passes AA on paper */

  /* ---------------------------------------------------------------
     CHAPTER COLOURS - assigned by meaning, never decoration
     --------------------------------------------------------------- */
  --c-green: #0F3B31;       /* the room that stays private */
  --c-emerald: #176B55;     /* EARN - borrowed trust */
  --c-oxblood: #591F2B;     /* BUY - the coldest, bought */
  --c-burgundy: #7B2939;
  --c-midnight: #101D3B;    /* Wednesday correspondence */
  --c-cobalt: #3157C8;      /* Saturday, the machine one */
  --c-burnt: #B6542A;
  --c-copper: #B87333;

  /* Own / Earn / Buy identity, used wherever the trichotomy appears */
  --c-own: var(--c-brass);
  --c-own-deep: #6E4E18;
  --c-earn: var(--c-emerald);
  --c-earn-deep: #0B3A2E;
  --c-buy: #8E3346;
  --c-buy-deep: var(--c-oxblood);

  --c-dim: #9C978C;
  --c-white: #FFFFFF;

  /* lines, veils, light */
  --c-hairline: rgba(198, 151, 73, 0.20);
  --c-hairline-strong: rgba(198, 151, 73, 0.38);
  --c-hairline-faint: rgba(198, 151, 73, 0.09);
  --c-rule-light: rgba(255, 255, 255, 0.09);
  --c-scrim: rgba(9, 10, 12, 0.88);
  --c-tungsten: rgba(232, 200, 137, 0.16);

  /* feedback */
  --c-error: #8C3A32;
  --c-error-paper: #F7E8E5;
  --c-notice-paper: #F7EFDD;

  /* The page ground is scroll-driven: each chapter sets these. */
  --ground: var(--c-obsidian);
  --ground-2: var(--c-charcoal);
  --accent: var(--c-brass);

  /* ---------------------------------------------------------------
     SPACE - strict 4 point scale
     --------------------------------------------------------------- */
  --space-4: 4px;    --space-8: 8px;    --space-12: 12px;  --space-16: 16px;
  --space-20: 20px;  --space-24: 24px;  --space-32: 32px;  --space-40: 40px;
  --space-48: 48px;  --space-56: 56px;  --space-64: 64px;  --space-80: 80px;
  --space-96: 96px;  --space-128: 128px; --space-160: 160px; --space-200: 200px;

  /* ---------------------------------------------------------------
     TYPE - deliberate extremes, all endpoints on the 4 point scale
     --------------------------------------------------------------- */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-12: 12px;  --fs-16: 16px;  --fs-20: 20px;  --fs-24: 24px;
  --fs-28: 28px;  --fs-32: 32px;  --fs-40: 40px;  --fs-48: 48px;
  --fs-56: 56px;  --fs-64: 64px;  --fs-80: 80px;  --fs-96: 96px;
  --fs-128: 128px; --fs-160: 160px; --fs-200: 200px;

  --step-caption: var(--fs-12);
  --step-body: clamp(var(--fs-16), 0.92rem + 0.3vw, var(--fs-20));
  --step-lead: clamp(var(--fs-20), 1.05rem + 0.7vw, var(--fs-28));
  --step-pull: clamp(var(--fs-28), 1.4rem + 1.8vw, var(--fs-48));
  --step-h3: clamp(var(--fs-24), 1.2rem + 1.2vw, var(--fs-40));
  --step-h2: clamp(var(--fs-40), 1.6rem + 4vw, var(--fs-96));
  --step-h2-tight: clamp(var(--fs-32), 1.4rem + 2.8vw, var(--fs-64));
  --step-hero: clamp(var(--fs-56), 1rem + 15vw, var(--fs-200));
  --step-environmental: clamp(var(--fs-80), 2rem + 18vw, 320px);
  --step-numeral: clamp(var(--fs-32), 1.4rem + 2vw, var(--fs-56));

  --lh-crush: 0.82;
  --lh-tight: 0.92;
  --lh-snug: 1.06;
  --lh-heading: 1.12;
  --lh-normal: 1.5;
  --lh-body: 1.62;

  --tracking-display: -0.045em;
  --tracking-heading: -0.03em;
  --tracking-normal: 0;
  --tracking-label: 0.22em;
  --tracking-meta: 0.14em;

  --wght-body: 300;
  --wght-body-strong: 500;
  --wght-display: 800;
  --wght-black: 900;
  --wght-cta: 600;
  --wdth-condensed: 78;
  --wdth-plate: 112;
  --wdth-display: 92;
  --wdth-numeral: 84;
  --wdth-wide: 118;

  /* ---------------------------------------------------------------
     LAYOUT - several deliberate spatial systems, not one wrapper
     --------------------------------------------------------------- */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-narrow: 680px;
  --measure: 66ch;

  --pad-mobile: var(--space-16);
  --pad-tablet: var(--space-24);
  --pad-desktop: var(--space-32);
  --container-pad: var(--pad-mobile);

  --chapter-y: var(--space-80);
  --chapter-y-large: var(--space-96);
  --chapter-y-compact: var(--space-48);

  --grid-gap: var(--space-16);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* ---------------------------------------------------------------
     RADIUS - engraved, not rounded
     --------------------------------------------------------------- */
  --r-0: 0px; --r-sm: 2px; --r-md: 4px; --r-full: 9999px;

  /* ---------------------------------------------------------------
     LIGHT AND SHADOW
     --------------------------------------------------------------- */
  --shadow-object: 0 24px 48px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-paper: 0 40px 80px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-inset-brass: inset 0 1px 0 rgba(232, 200, 137, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.4);

  /* Machined brass surface, reused on plates, keys, buttons and tokens. */
  --surface-brass: linear-gradient(
    148deg,
    #8A6A2C 0%, #C69749 18%, #E8C889 32%, #B78B41 46%,
    #7A5C28 62%, #C89C50 78%, #E4C282 88%, #8A6A2C 100%
  );
  --surface-steel: linear-gradient(150deg, #2A2E36 0%, #454B57 40%, #22262C 70%, #33383F 100%);

  /* ---------------------------------------------------------------
     MOTION - one easing language, used consistently
     --------------------------------------------------------------- */
  --ease-door: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-mech: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-ui: cubic-bezier(0, 0, 0.2, 1);
  --ease-settle: cubic-bezier(0.34, 1.16, 0.64, 1);

  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --dur-slower: 700ms;
  --dur-editorial: 900ms;
  --dur-door: 1400ms;

  /* ---------------------------------------------------------------
     Z INDEX
     --------------------------------------------------------------- */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-object: 20;
  --z-nav: 180;
  --z-dock: 220;
  --z-cursor: 320;
  --z-door: 400;
}

@media (min-width: 768px) {
  :root {
    --container-pad: var(--pad-tablet);
    --chapter-y: var(--space-96);
    --chapter-y-large: var(--space-128);
    --chapter-y-compact: var(--space-64);
    --grid-gap: var(--space-24);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad: var(--pad-desktop);
    --chapter-y: var(--space-96);
    --chapter-y-large: var(--space-128);
    --chapter-y-compact: var(--space-64);
  }
}