/* ============================================================
   OPERATOR GOODS CO — Design Tokens (variables.css)
   v2 — re-skinned to the client's supplied brand identity.
   Palette sampled directly from the OG CO. logo lockup and matched
   to the Website Strategy & Developer Brief section 7:
   "deep navy, vivid red, white and a restrained charcoal/steel gray".
   Supersedes the warm Ink/Paper/Bone/Field palette. The structural
   grammar (tight tracking, generous rhythm, dark feature bands,
   oversized footer wordmark) is unchanged.
   Aesthetic: "Operator Standard" — field goods on workshop paper.
   Structural/interaction grammar borrowed from houseplant.com;
   ALL surface values below are ORIGINAL to Operator Goods Co.
   No Houseplant brand colors or proprietary fonts are used.
   Every text pair verified WCAG 2.1 AA (see DESIGN_SYSTEM.md §1).
   ============================================================ */

:root {
  /* ---- Colors ---------------------------------------------------------- */
  --color-ink:        #0a1332; /* NAVY — primary text · dark bands · filled buttons · wordmark */
  --color-ink-deep:   #000d34; /* logo navy, exact — deepest surface */
  --color-paper:      #f4f6f9; /* page canvas — cool near-white, generous white space */
  --color-bone:       #ffffff; /* card surface — true white, lifts off the canvas */
  --color-slate:      #575e73; /* muted borders · helper/caption text · hairline dividers */
  --color-field:      #cc0000; /* ACCENT — logo red. Reserved. LIGHT text only. */
  --color-field-deep: #9e0000; /* accent for accent-COLORED text on light surfaces */
  --color-steel:      #9398aa; /* logo steel grey — secondary marks, quiet rules */

  /* Convenience aliases */
  --color-onyx:       #000000; /* icon strokes only, used sparingly */

  /* ---- Surfaces -------------------------------------------------------- */
  --surface-canvas:       var(--color-paper);
  --surface-card:         var(--color-bone);
  --surface-dark:         var(--color-ink);      /* dark feature band A */
  --surface-dark-accent:  var(--color-ink-deep); /* dark feature band B */
  --surface-accent:       var(--color-field);    /* the one red surface — sign-up */
  --surface-footer-mark:  var(--color-ink);

  /* ---- Typography — Font Families (free / OFL — see DESIGN_SYSTEM.md §2) */
  --font-display: 'Archivo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Typography — Weights ------------------------------------------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Typography — Scale (size / line-height / tracking) -------------- */
  --text-eyebrow:      13px; --leading-eyebrow: 1.2;  --tracking-eyebrow: 1.4px;   /* uppercase label */
  --text-caption:      14px; --leading-caption: 1.71; --tracking-caption: -0.02px;
  --text-body-sm:      16px; --leading-body-sm: 1.5;  --tracking-body-sm: -0.02px;
  --text-body:         18px; --leading-body:    1.44; --tracking-body:    -0.02px;
  --text-subheading:   21px; --leading-subheading: 1.33; --tracking-subheading: -0.02px;
  --text-heading-sm:   28px; --leading-heading-sm: 1.3; --tracking-heading-sm: -0.02px;
  --text-heading:      32px; --leading-heading:    1.3; --tracking-heading:   -0.021px;
  --text-heading-lg:   45px; --leading-heading-lg: 1.15; --tracking-heading-lg: -0.047px;
  --text-display:      70px; --leading-display:    1.0;  --tracking-display:   -0.05px;
  /* Responsive display (use in place of the fixed 70px where full-bleed) */
  --text-display-fluid: clamp(40px, 8vw, 70px);
  --text-wordmark-fluid: clamp(48px, 16vw, 200px); /* footer wordmark — fills viewport width */

  /* ---- Spacing (4px base) --------------------------------------------- */
  --spacing-4:   4px;
  --spacing-8:   8px;
  --spacing-12:  12px;
  --spacing-16:  16px;
  --spacing-20:  20px;
  --spacing-24:  24px;
  --spacing-32:  32px;
  --spacing-40:  40px;
  --spacing-56:  56px;
  --spacing-64:  64px;
  --spacing-80:  80px;
  --spacing-120: 120px;
  --section-gap: clamp(64px, 10vw, 120px); /* rhythm between major sections */

  /* ---- Layout ---------------------------------------------------------- */
  --page-max-width: 1200px;
  --measure:        68ch;   /* max text line length */
  --card-padding:   20px;
  --element-gap:    20px;
  --nav-height:     64px;

  /* ---- Radius (binary: 4 for controls, 8 for cards) ------------------- */
  --radius-md: 4px;  /* buttons · inputs · tags */
  --radius-lg: 8px;  /* cards · media */

  /* ---- Shadows (soft, warm-neutral — the ONLY elevation) -------------- */
  --shadow-sm:   rgba(10, 19, 50, 0.10) 0px 2px 8px 0px; /* cards */
  --shadow-sm-2: rgba(10, 19, 50, 0.16) 0px 2px 8px 0px; /* buttons */
  --shadow-md:   rgba(10, 19, 50, 0.10) 0px 12px 32px -8px; /* lifted media on the light canvas */

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}