/* ============================================================
   ORIGO DESIGN SYSTEM — Foundations
   Dark-first, strictly monochrome. White is the only accent.
   No color of any kind: depth comes from black, white, grey.
   ============================================================ */

/* ---- Fonts ----
   Loaded from Google Fonts (Inter, Geist Mono).
   Self-host by dropping the .woff2 files into /fonts and swapping the
   @import for @font-face if you need offline / production builds. */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root {
  /* ============ COLOR — RAW SCALE ============ */
  /* Canvas + surfaces, darkest to lightest */
  --black:            #000000;  /* page canvas */
  --surface-1:        #070707;  /* raised panel on canvas */
  --surface-2:        #101010;  /* card */
  --surface-3:        #161616;  /* card hover / nested */
  --surface-4:        #1E1E1E;  /* input wells, chips */

  /* Neutral / ink scale, white to black */
  --white:            #FFFFFF;  /* accent + emphasis + primary fill */
  --ink-100:          #EDEDED;  /* primary text */
  --ink-200:          #C4C4C4;  /* secondary text */
  --ink-300:          #9A9A9A;  /* muted text */
  --ink-400:          #6A6A6A;  /* faint text / disabled label */
  --ink-500:          #4A4A4A;  /* hairline-heavy / icon idle */
  --ink-600:          #2A2A2A;  /* deep separators */

  /* Hairline borders (white at low alpha) */
  --border-faint:     rgba(255,255,255,.06);
  --border-1:         rgba(255,255,255,.08);
  --border-2:         rgba(255,255,255,.11);
  --border-3:         rgba(255,255,255,.14);
  --border-strong:    rgba(255,255,255,.22);

  /* Overlays + fills */
  --fill-ghost:       rgba(255,255,255,.04);
  --fill-ghost-hover: rgba(255,255,255,.07);
  --fill-ghost-press: rgba(255,255,255,.10);
  --scrim:            rgba(0,0,0,.72);

  /* Soft white radial glow (depth, used sparingly) */
  --glow-soft:   radial-gradient(60% 50% at 50% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%);
  --glow-faint:  radial-gradient(50% 40% at 50% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 72%);

  /* ============ SEMANTIC COLOR ============ */
  --bg:               var(--black);
  --bg-raised:        var(--surface-1);
  --card:             var(--surface-2);
  --card-hover:       var(--surface-3);
  --well:             var(--surface-4);

  --fg:               var(--ink-100);   /* default text */
  --fg-strong:        var(--white);      /* emphasis */
  --fg-muted:         var(--ink-300);
  --fg-faint:         var(--ink-400);

  --border:           var(--border-1);
  --border-hover:     var(--border-3);
  --focus-ring:       var(--white);

  /* ============ TYPE — FAMILIES ============ */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans); /* serif removed from the system; alias kept so legacy refs stay sans */
  --font-heading: var(--font-sans); /* H1/H2/display use the sans voice, tight + heavy */
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ============ TYPE — SCALE ============ */
  --fs-display:  clamp(56px, 8vw, 96px);  /* hero display, serif */
  --fs-h1:       clamp(44px, 6vw, 76px);
  --fs-h2:       clamp(32px, 4.2vw, 50px);
  --fs-h3:       23px;
  --fs-lead:     21px;   /* large intro paragraph */
  --fs-body:     17px;
  --fs-sm:       15px;
  --fs-label:    12px;   /* mono eyebrow / label */
  --fs-micro:    11px;   /* mono caption */

  --lh-tight:    1.04;   /* display / headlines */
  --lh-snug:     1.18;   /* h3 */
  --lh-body:     1.6;    /* paragraphs */

  --tracking-display: -0.045em;  /* tight, dominant sans headlines */
  --tracking-h:       -0.035em;
  --weight-heading:    600;
  --tracking-body:     0;
  --tracking-mono:     0.2em;  /* eyebrows, labels, units */

  /* ============ SPACING (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: 80px;
  --space-10: 104px;  /* section padding */
  --space-11: 144px;

  /* ============ LAYOUT ============ */
  --container:  1180px;
  --gutter:     28px;
  --col-narrow: 720px;

  /* ============ RADIUS ============ */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ============ SHADOW / ELEVATION ============ */
  /* Shadows are near-black, soft, low. Glow is a separate light layer. */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.6);
  --shadow-md:  0 8px 24px -8px rgba(0,0,0,.7);
  --shadow-lg:  0 30px 80px -20px rgba(0,0,0,.85);
  --shadow-hover: 0 20px 50px -16px rgba(0,0,0,.8);
  --ring-focus: 0 0 0 2px var(--black), 0 0 0 4px rgba(255,255,255,.85);
  --inset-hairline: inset 0 0 0 1px var(--border-1);

  /* ============ MOTION ============ */
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-soft:  cubic-bezier(.4,0,.2,1);
  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-reveal: 700ms;   /* scroll reveal */
  --reveal-rise: 22px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply via utility classes or copy into component CSS.
   ============================================================ */

.origo-eyebrow,
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.display {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: var(--fg-strong);
}

h1, .h1 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--fs-h1);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  color: var(--fg-strong);
}

h2, .h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--tracking-h);
  color: var(--fg-strong);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-h);
  color: var(--fg);
}

/* Emphasis accent word inside a heading — sans italic at the same dominant
   weight. The one expressive move against the tight upright headlines. */
.em-serif, .em {
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
}

.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-200);
}

.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }

.label,
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-200);
}

a { color: var(--fg-strong); text-decoration: none; }