/* Stories Not Atoms — design tokens
   Direction 2a: tobacco accent on a deep umber ground. Derived from the
   Nocturne system: same structural rules (left-aligned layouts, outlined
   actions, 8px radii, 0.7x density, rules that fade at their ends), re-toned
   warm and darker.

   Type follows the landing canvas's current settings: Sora over Inter,
   flat ground, editorial pacing. The Space Grotesk / IBM Plex Sans pairing
   from 2a is kept below as an alternative.

   Take every color, font, space and radius from a variable. Do not
   hard-code a hex a token already carries. */

:root {
  /* --- Ground and ink ------------------------------------------------- */
  --color-bg:        #141311;  /* page ground */
  --color-surface:   #201e1a;  /* cards, inputs, raised panels */
  --color-stripe:    #191715;  /* placeholder stripe, darker step */
  --color-text:      #eae7e1;  /* primary ink */
  --color-text-strong: #f2eee6; /* ink on the band */
  --color-text-lead: #cfcac1;  /* lead copy, card copy */
  --color-text-mute: #b6b0a7;  /* body copy on the ground (7.3:1) */
  --color-text-nav:  #a8a29a;  /* nav links, ghost actions */
  --color-text-dim:  #8f8a81;  /* meta, captions, footers (4.6:1) */
  --color-border:    #2a2721;  /* hairline edges on surfaces */
  --color-rule:      #403c34;  /* in-content structural rules */

  /* --- Accent (Tobacco) -----------------------------------------------
     One accent, used as a line, a mark and a small-caps label — never as a
     flood. The logo's orange stays the only saturated thing on the page. */
  --color-accent:       #c09b6d;  /* borders, kickers, numerals */
  --color-accent-light: #ddc6a4;  /* ink on the accent outline, hover text */
  --color-accent-tint:  #3a2f1e;  /* hover/selection fills */
  --color-accent-deep:  #221c12;  /* pressed fills */

  --color-accent-100: #f7efe2;
  --color-accent-200: #ecdcc3;
  --color-accent-300: #ddc6a4;
  --color-accent-400: #ceb088;
  --color-accent-500: #c09b6d;
  --color-accent-600: #9c7c53;
  --color-accent-700: #775e3e;
  --color-accent-800: #53412a;
  --color-accent-900: #2e2619;

  --color-neutral-100: #f4f2ee;
  --color-neutral-200: #e4e1da;
  --color-neutral-300: #cfcac1;
  --color-neutral-400: #b6b0a7;
  --color-neutral-500: #97918a;
  --color-neutral-600: #79736c;
  --color-neutral-700: #5c5751;
  --color-neutral-800: #403c34;
  --color-neutral-900: #201e1a;

  /* --- The one saturated field (one full-bleed band per page) -------- */
  --color-band:      #2e2619;
  --color-band-glow: #3a2f1e;
  --color-band-ink:  #d8c3a2;

  /* Page ground. Flat by default; the "warm bloom" variant is:
     radial-gradient(1100px 680px at 84% -180px, #2b2419, transparent 60%),
     radial-gradient(1000px 760px at -10% 100%, rgba(0,0,0,.45), transparent 55%),
     var(--color-bg); */
  --ground: var(--color-bg);

  /* --- Type ----------------------------------------------------------- */
  --font-heading: "Sora", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* 2a alternative: "Space Grotesk" / "IBM Plex Sans", tracking -0.03em /
     -0.025em, display leading 1.04. */

  --track-display: -0.035em;
  --track-heading: -0.03em;
  --leading-display: 1.06;

  --text-display:  clamp(42px, 6.2vw, 84px);
  --text-h1:       clamp(28px, 3.4vw, 44px);
  --text-h2:       clamp(26px, 2.8vw, 34px);
  --text-h3:       25px;
  --text-lead:     17px;
  --text-body:     15.5px;
  --text-card:     15px;
  --text-small:    13.5px;
  --text-kicker:   12px;
  --text-caption:  11.5px;
  --text-label:    10.5px;

  /* --- Space (0.7x density) ------------------------------------------ */
  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;
  --space-12: 34px;
  --space-16: 44px;
  --space-24: 72px;
  --space-32: 96px;

  /* Pacing (Editorial) */
  --sec: 96px;
  --row: 34px;
  --hero-top: 112px;
  --hero-bot: 84px;
  --band-pad: 84px;

  --edge: clamp(20px, 5vw, 72px);
  --measure: 56ch;
  --page: 1200px;

  /* --- Radius and elevation ------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 0 0 1px var(--color-border);
  --shadow-md: 0 0 0 1px var(--color-rule), 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 0 0 1px var(--color-neutral-600), 0 16px 40px rgba(0, 0, 0, 0.65);
}