/* ============================================================
   orbitlex.css — distributable token spine for the vanilla site
   ------------------------------------------------------------
   FLATTENED from the Orbitlex Design System tokens
   (tokens/colors.css + typography.css + spacing.css).

   Link ONCE in <head>, BEFORE the page's inline <style> blocks:
       <link rel="stylesheet" href="orbitlex.css" />

   Pure :root custom properties only — NO element resets, NO @font-face.
   Linking this is visually a no-op on its own; it just makes
   var(--navy), var(--text-h2), var(--container), etc. resolvable.

   Single source of truth: the design system. Do not hand-edit values
   here — regenerate from tokens/ when the DS changes.
   ============================================================ */

/* ============================================================
   Orbitlex — Colour
   Navy + teal are the brand signature. Everything else is a
   functional neutral. Colour is functional (status), never
   ornamental. One accent only: teal.
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --navy:            #0A2E50;  /* primary — titles, H1, dark surfaces */
  --navy-deep:       #071E35;  /* footer / deepest surface */
  --blue:            #2E5C8A;  /* secondary — neutral status text, links-alt */
  --teal:            #2F7F7F;  /* THE accent — H2, dividers, links, CTAs */
  --teal-hover:      #268A8A;  /* teal interactive hover */

  /* ---- Neutrals ---- */
  --ink:             #0B1F33;  /* body copy */
  --muted:           #6B7C8F;  /* notes, captions, secondary text */
  --border:          #D8E3EE;  /* rules, table borders, card edges */
  --bg:              #F5F8FC;  /* page tints, callout fills */
  --header-fill:     #EAF1F8;  /* table header rows */
  --white:           #FFFFFF;

  /* ---- Functional (web) ---- */
  --red:             #C53030;  /* web negative / penalty emphasis */
  --amber:           #B45309;  /* web caution */

  /* ---- Status chip system (deliverables) ----
     Pale fill + darker bold text. Applied only to ordinal / state
     values (risk, severity, readiness, timing). NEVER on statutory
     determinations (Obligated / Monitor / Exempt). */
  --chip-positive-fill: #E7F4EC;  --chip-positive-text: #1E7A4D;
  --chip-caution-fill:  #FBEFD9;  --chip-caution-text:  #B45309;
  --chip-negative-fill: #FBE7E7;  --chip-negative-text: #A63A3A;
  --chip-neutral-fill:  #EAF1F8;  --chip-neutral-text:  #2E5C8A;
  --chip-muted-fill:    #F0F3F7;  --chip-muted-text:    #6B7C8F;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --text-strong:     var(--navy);
  --text-body:       var(--ink);
  --text-muted:      var(--muted);
  --text-link:       var(--teal);
  --text-on-dark:    rgba(255,255,255,.82);
  --text-on-dark-muted: rgba(255,255,255,.55);

  --surface-page:    var(--white);
  --surface-tint:    var(--bg);
  --surface-card:    var(--white);
  --surface-dark:    var(--navy);
  --surface-darker:  var(--navy-deep);
  --surface-header:  var(--header-fill);

  --border-default:  var(--border);
  --border-strong:   #C2D2E2;
  --border-on-dark:  rgba(255,255,255,.12);

  --accent:          var(--teal);
  --accent-hover:    var(--teal-hover);
  --focus-ring:      var(--blue);
}

/* ============================================================
   Orbitlex — Typography
   Display + body: Satoshi. Labels, eyebrows, codes: IBM Plex Mono,
   UPPERCASE and tracked — this mono treatment is the "engineered"
   signal of the brand. Used sparingly, never for body copy.
   ============================================================ */

:root {
  --font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */

  /* ---- Type scale (rem on an 18px root, matching the site) ---- */
  --text-display: clamp(2rem, 3.5vw, 3.2rem);  /* hero H1 */
  --text-h1:      clamp(1.8rem, 3vw, 2.6rem);
  --text-h2:      clamp(1.4rem, 2.5vw, 2.2rem);
  --text-h3:      1.15rem;
  --text-h4:      1rem;
  --text-lg:      1.05rem;
  --text-base:    1rem;
  --text-sm:      0.9rem;
  --text-xs:      0.82rem;
  --text-eyebrow: 0.72rem;   /* mono eyebrow / label */

  /* ---- Line heights ---- */
  --lh-tight:     1.05; /* @kind other */
  --lh-heading:   1.25; /* @kind other */
  --lh-body:      1.65; /* @kind other */
  --lh-relaxed:   1.75; /* @kind other */

  /* ---- Letter spacing ---- */
  --tracking-display: -0.02em;  /* tighten large display */
  --tracking-heading: -0.01em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.1em;    /* mono eyebrows / labels */
  --tracking-wide:    0.08em;
}

/* ============================================================
   Orbitlex — Spacing, radii, borders, elevation
   Restrained and page-honest. Shadows are avoided almost entirely
   (a compliance work product, not a SaaS dashboard). Cards lean on
   a 1px border, not elevation. Corners are modest.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-28:  110px;   /* vertical section rhythm */

  /* ---- Radii — modest, never pill-soft on big surfaces ---- */
  --radius-xs:  4px;    /* tags, chips, badges */
  --radius-sm:  6px;    /* buttons, inputs */
  --radius-md:  8px;    /* small cards, callouts */
  --radius-lg:  12px;   /* cards, panels */
  --radius-xl:  16px;   /* large feature panels / form wrap */
  --radius-pill: 999px; /* status badges only */

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;   /* inputs */
  --border-accent: 3px;           /* teal left-accent on info blocks */

  /* ---- Elevation — used very sparingly ---- */
  --shadow-none: none;
  --shadow-hairline: 0 1px 0 rgba(0,0,0,.06);          /* sticky nav rule */
  --shadow-card-hover: 0 6px 24px rgba(10,46,80,.10);  /* hover lift only */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --dur-fast: .15s; /* @kind other */
  --dur: .2s; /* @kind other */

  /* ---- Layout ---- */
  --container: 1800px;        /* THE page container — homepage and pricing share this exact width */
  --container-narrow: 960px;
  --container-prose: 760px;
}
