/* ============================================================
   UIA — Webfonts
   ------------------------------------------------------------
   SUBSTITUTION NOTE (flagged to user):
   The brief calls for three proprietary-feeling faces:
     • an "engineered display face"   → Space Grotesk
     • an "editorial serif"           → Source Serif 4
     • a "mono utility face"          → Space Mono
   No brand binaries were supplied, so these are the nearest
   Google Fonts matches, loaded from the Google Fonts CDN.
   To self-host, drop the .woff2 files in /assets/fonts and
   replace the @import below with @font-face rules.
   ============================================================ */



:root {
  /* Family stacks */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ============================================================
   UIA — Color tokens
   ------------------------------------------------------------
   The system runs on a two-world contrast:
     WORKSHOP  → deep navy bands (the raw idea, the bench)
     PAPER     → warm editorial bands (the finished product)
   Gold/amber is the single accent + the gear-line texture.
   Brand purple is an identity moment, used sparingly.
   ============================================================ */

:root {
  /* ---- Navy / Workshop ramp ---- */
  --navy-950: #0B1330;   /* deepest workshop, footer */
  --navy-900: #0F1A45;
  --navy-800: #122050;
  --navy-700: #16265F;   /* ⭐ brand navy base */
  --navy-600: #21356F;
  --navy-500: #324a86;
  --navy-400: #4d639f;

  /* ---- Paper ramp (warm) ---- */
  --paper-50:  #FBF9F2;  /* raised cards on paper */
  --paper-100: #F7F3E9;
  --paper-200: #F4F0E6;  /* ⭐ brand paper base */
  --paper-300: #EAE3D2;
  --paper-400: #DBD2BB;  /* hairline / gear line on paper */
  --paper-500: #C7BB9C;

  /* ---- Gold / Amber accent ---- */
  --gold-200: #F8E4AF;
  --gold-300: #F3D27E;
  --gold-400: #ECB740;   /* ⭐ primary accent / CTA */
  --gold-500: #D89B1E;   /* pressed / deeper gold */
  --gold-600: #B17C12;

  /* ---- Brand purple (identity, sparing) ---- */
  --purple-600: #4A38A8;
  --purple-500: #5E4BC7;  /* ⭐ identity purple */
  --purple-400: #8175DA;
  --purple-200: #D6CFF3;

  /* ---- Ink (text on paper) ---- */
  --ink-900: #14182B;     /* near-black navy, headlines on paper */
  --ink-700: #353B57;
  --ink-500: #5C6280;     /* muted body / captions on paper */
  --ink-400: #7E84A0;

  /* ---- Pure ---- */
  --white: #FFFFFF;
  --black: #000000;

  /* ---- Semantic surfaces ---- */
  --surface-workshop:        var(--navy-700);
  --surface-workshop-deep:   var(--navy-950);
  --surface-workshop-raised: var(--navy-600);
  --surface-paper:           var(--paper-200);
  --surface-paper-raised:    var(--paper-50);
  --surface-paper-sunken:    var(--paper-300);

  /* ---- Semantic text ---- */
  --text-on-paper:        var(--ink-900);
  --text-on-paper-muted:  var(--ink-500);
  --text-on-workshop:     var(--paper-100);
  --text-on-workshop-muted: rgba(247, 243, 233, 0.62);

  /* ---- Accent / identity semantics ---- */
  --accent:        var(--gold-400);
  --accent-press:  var(--gold-500);
  --accent-text:   var(--ink-900);   /* text that sits on gold */
  --identity:      var(--purple-500);

  /* ---- Hairlines & gear lines ---- */
  --hairline-paper:        var(--paper-400);
  --hairline-workshop:     rgba(244, 240, 230, 0.16);
  --gearline-on-workshop:  rgba(236, 183, 64, 0.34);  /* thin gold schematic line on navy */
  --gearline-on-paper:     rgba(178, 135, 30, 0.30);  /* thin gold schematic line on paper */

  /* ---- Focus ---- */
  --focus-ring: var(--gold-400);

  /* ---- Semantic status (sparing; tuned to palette) ---- */
  --success: #2E7D5B;
  --warning: var(--gold-500);
  --danger:  #B23B3B;
}

/* ============================================================
   UIA — Typography tokens
   Three voices:
     DISPLAY  Space Grotesk    engineered, confident headlines
     SERIF    Source Serif 4   editorial body & credibility
     MONO     Space Mono       technical labels, FIG. callouts
   Headlines are sentence-case. Uppercase/tracked moments are mono.
   ============================================================ */

:root {
  /* ---- Display sizes (Space Grotesk) ---- */
  --display-hero-size: 76px;
  --display-hero-lh: 1.02;   /* @kind other */
  --display-hero-ls: -0.02em; /* @kind other */
  --display-xxl-size: 56px;
  --display-xxl-lh: 1.05;    /* @kind other */
  --display-xxl-ls: -0.018em; /* @kind other */
  --display-xl-size: 40px;
  --display-xl-lh: 1.08;     /* @kind other */
  --display-xl-ls: -0.015em; /* @kind other */
  --display-lg-size: 30px;
  --display-lg-lh: 1.12;     /* @kind other */
  --display-lg-ls: -0.012em; /* @kind other */
  --display-md-size: 23px;
  --display-md-lh: 1.2;      /* @kind other */
  --display-md-ls: -0.008em; /* @kind other */
  --display-weight: 600;     /* @kind other */
  --display-weight-medium: 500; /* @kind other */

  /* ---- Serif body (Source Serif 4) ---- */
  --serif-lead-size: 21px;
  --serif-lead-lh: 1.55;     /* @kind other */
  --serif-lead-ls: 0;        /* @kind other */
  --serif-body-size: 18px;
  --serif-body-lh: 1.62;     /* @kind other */
  --serif-body-ls: 0;        /* @kind other */
  --serif-sm-size: 15.5px;
  --serif-sm-lh: 1.55;       /* @kind other */
  --serif-sm-ls: 0;          /* @kind other */
  --serif-weight: 400;       /* @kind other */
  --serif-weight-semibold: 600; /* @kind other */

  /* ---- Mono labels (Space Mono) ---- */
  --mono-eyebrow-size: 12px;
  --mono-eyebrow-lh: 1;      /* @kind other */
  --mono-eyebrow-ls: 0.18em; /* @kind other */
  --mono-fig-size: 12.5px;
  --mono-fig-lh: 1.1;        /* @kind other */
  --mono-fig-ls: 0.1em;      /* @kind other */
  --mono-label-size: 13px;
  --mono-label-lh: 1.3;      /* @kind other */
  --mono-label-ls: 0.05em;   /* @kind other */
  --mono-button-size: 13.5px;
  --mono-button-lh: 1;       /* @kind other */
  --mono-button-ls: 0.14em;  /* @kind other */
  --mono-caption-size: 12px;
  --mono-caption-lh: 1.5;    /* @kind other */
  --mono-caption-ls: 0.02em; /* @kind other */
  --mono-weight: 400;        /* @kind other */
  --mono-weight-bold: 700;   /* @kind other */
}

/* ============================================================
   UIA — Spacing, radius, elevation, motion tokens
   Base unit: 4px. The system leans on surface contrast and
   thin gold gear-lines for separation more than on shadow.
   ============================================================ */

:root {
  /* ---- Spacing (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;     /* section rhythm */
  --space-28: 112px;    /* generous band padding */
  --space-section: 96px;

  /* ---- Containers ---- */
  --container-max: 1240px;
  --container-narrow: 760px;   /* editorial reading measure */
  --gutter: 32px;

  /* ---- Radius (engineered, restrained) ---- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;     /* canonical card / button radius */
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* ---- Borders ---- */
  --border-hairline: 1px;
  --border-rule: 2px;     /* schematic / framing rule weight */

  /* ---- Elevation (kept subtle; navy-tinted) ---- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(12, 21, 56, 0.06);
  --shadow-2: 0 6px 20px -8px rgba(12, 21, 56, 0.18);
  --shadow-3: 0 18px 48px -16px rgba(12, 21, 56, 0.28);
  --shadow-gold: 0 10px 28px -10px rgba(216, 155, 30, 0.40);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 0.84, 0.36, 1);   /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}

/* ============================================================
   UIA — Base element styles & type utility classes
   Maps tokens onto usable classes. Consumers can use the
   .u-* helpers or pull the raw custom properties directly.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--serif-body-size);
  line-height: var(--serif-body-lh);
  color: var(--text-on-paper);
  background: var(--surface-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold-300); color: var(--ink-900); }

/* ---- Display ---- */
.u-display-hero, .u-display-xxl, .u-display-xl, .u-display-lg, .u-display-md {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  margin: 0;
  text-wrap: balance;
}
.u-display-hero { font-size: var(--display-hero-size); line-height: var(--display-hero-lh); letter-spacing: var(--display-hero-ls); }
.u-display-xxl  { font-size: var(--display-xxl-size);  line-height: var(--display-xxl-lh);  letter-spacing: var(--display-xxl-ls); }
.u-display-xl   { font-size: var(--display-xl-size);   line-height: var(--display-xl-lh);   letter-spacing: var(--display-xl-ls); }
.u-display-lg   { font-size: var(--display-lg-size);   line-height: var(--display-lg-lh);   letter-spacing: var(--display-lg-ls); }
.u-display-md   { font-size: var(--display-md-size);   line-height: var(--display-md-lh);   letter-spacing: var(--display-md-ls); }

/* ---- Serif ---- */
.u-lead { font-family: var(--font-serif); font-size: var(--serif-lead-size); line-height: var(--serif-lead-lh); margin: 0; text-wrap: pretty; }
.u-body { font-family: var(--font-serif); font-size: var(--serif-body-size); line-height: var(--serif-body-lh); margin: 0; text-wrap: pretty; }
.u-body-sm { font-family: var(--font-serif); font-size: var(--serif-sm-size); line-height: var(--serif-sm-lh); margin: 0; }

/* ---- Mono ---- */
.u-eyebrow {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: var(--mono-eyebrow-size); line-height: var(--mono-eyebrow-lh);
  letter-spacing: var(--mono-eyebrow-ls); text-transform: uppercase;
}
.u-fig {
  font-family: var(--font-mono); font-weight: var(--mono-weight-bold);
  font-size: var(--mono-fig-size); line-height: var(--mono-fig-lh);
  letter-spacing: var(--mono-fig-ls); text-transform: uppercase;
}
.u-mono-label {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: var(--mono-label-size); line-height: var(--mono-label-lh);
  letter-spacing: var(--mono-label-ls);
}
.u-mono-caption {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: var(--mono-caption-size); line-height: var(--mono-caption-lh);
  letter-spacing: var(--mono-caption-ls);
}

/* ---- Gear-line texture: thin gold concentric/cog hint ----
   Use as a decorative background layer on workshop or paper
   bands. Kept extremely subtle. */
.u-gearline-bg {
  background-image:
    repeating-radial-gradient(circle at 88% -10%,
      transparent 0 38px,
      var(--gearline-on-workshop) 38px 39px,
      transparent 39px 86px);
}
.u-gearline-bg--paper {
  background-image:
    repeating-radial-gradient(circle at 88% -10%,
      transparent 0 38px,
      var(--gearline-on-paper) 38px 39px,
      transparent 39px 86px);
}

/* ---- Layout helpers ---- */
.u-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.u-band { padding-block: var(--space-section); }
.u-workshop { background: var(--surface-workshop); color: var(--text-on-workshop); }
.u-paper { background: var(--surface-paper); color: var(--text-on-paper); }