/* Offscreen design tokens — from the design handoff (colors, type, spacing). */

/* Offscreen — Color Tokens (1D: dark-first, fully monochrome) */

:root {
  /* ——— Base (dark-first) ——— */
  --bg:               #0A0A0A;   /* page background */
  --surface:          #141414;   /* raised panels, cards */
  --chrome:           #1E1E1E;   /* card headers, input fields */

  --ink:              #0A0A0A;   /* text on light surfaces */
  --bone:             #F5F2ED;   /* primary text on dark */
  --white:            #FFFFFF;   /* pure white — emphasis only */

  /* ——— Neutrals ——— */
  --grey-900:         #2A2A2A;
  --grey-800:         #3D3D3D;
  --grey-700:         #555555;
  --grey-600:         #6E6E6E;
  --grey-500:         #8A8A8A;
  --grey-400:         #A3A3A3;
  --grey-300:         #BDBDBD;
  --grey-200:         #D4D4D4;
  --grey-100:         #E8E8E8;

  /* ——— Semantic (dark-first) ——— */
  --fg-primary:       var(--bone);
  --fg-secondary:     var(--grey-400);
  --fg-tertiary:      var(--grey-600);
  --fg-emphasis:      var(--white);

  --bg-primary:       var(--bg);
  --bg-elevated:      var(--surface);
  --bg-light:         var(--bone);      /* rare light sections */

  --border-default:   var(--grey-800);  /* hairlines on dark */
  --border-light:     var(--grey-200);  /* hairlines on light sections */

  /* ——— No accent color. ———
     Emphasis = pure white, weight, or size.
     The only non-neutral allowed anywhere: */
  --danger:           #E84040;   /* form errors only */
}

/* Offscreen — Typography Tokens (1D: grotesque headlines, mono demoted to labels/data) */

:root {
  /* ——— Font Stacks ——— */
  --font-grotesque:   'Space Grotesk', 'Arial Black', sans-serif;  /* headlines + wordmark */
  --font-mono:        'Space Mono', 'Courier New', monospace;       /* labels, buttons, data */
  --font-sans:        'Work Sans', Helvetica, Arial, sans-serif;     /* body */

  /* ——— Font Weights ——— */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-bold:      700;

  /* ——— Type Scale ——— */

  /* Display / Headlines — Space Grotesk Bold, uppercase, tight */
  --text-display-xl:  120px;   /* wordmark moments */
  --text-display-lg:  88px;    /* hero headlines */
  --text-display-md:  64px;    /* section headlines */
  --text-display-sm:  40px;    /* sub-section headlines */
  --text-display-xs:  24px;    /* card titles */

  /* Body — Inter */
  --text-body-lg:     18px;
  --text-body-md:     16px;
  --text-body-sm:     14px;

  /* Mono UI — Space Mono (labels, eyebrows, buttons, data) */
  --text-mono-lg:     16px;    /* large data values pair w/ 36px+ for metrics */
  --text-mono-md:     13px;    /* buttons, eyebrows */
  --text-mono-sm:     11px;    /* nav labels, tags */
  --text-mono-xs:     10px;    /* utility/corner text */

  /* ——— Line Heights ——— */
  --leading-display:  0.98;    /* headlines */
  --leading-tight:    1.1;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* ——— Letter Spacing ——— */
  --tracking-display: -0.03em; /* grotesque headlines */
  --tracking-normal:  0;
  --tracking-wide:    0.06em;  /* mono labels/buttons */
  --tracking-wider:   0.1em;   /* utility text */
}

/* Offscreen — Spacing & Layout Tokens */

:root {
  /* ——— Spacing Scale (8px base) ——— */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    24px;
  --space-6:    32px;
  --space-7:    48px;
  --space-8:    64px;
  --space-9:    96px;
  --space-10:   128px;
  --space-11:   160px;
  --space-12:   200px;

  /* ——— Layout ——— */
  --content-max:     1200px;
  --content-narrow:  800px;
  --grid-columns:    12;
  --grid-gutter:     24px;
  --page-margin:     clamp(24px, 5vw, 80px);

  /* ——— Border ——— */
  --radius-none:  0px;
  --radius-sm:    2px;
  --radius-md:    4px;   /* rare — use sparingly */

  --border-width: 1px;
  --rule-weight:  1px;
}