/* Rabbit Hole Digital — Webfonts
   SUBSTITUTION NOTE: no brand font files were provided. These are the nearest
   Google Fonts matches to the brief (editorial grotesque display with black +
   light weights; warm editorial serif body; grounded mono for labels).
   Swap in licensed brand files if/when supplied.
     Display : Archivo   (grotesque; black for uppercase headings, light for pull-quotes)
     Body    : Instrument Sans (clean humanist sans, ~16px, generous leading)
     Mono    : IBM Plex Mono (labels, tags, numbered eyebrows) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;800;900&family=Instrument+Sans:wght@400;500;600;700&family=Martian+Mono:wght@400;500;600&display=swap');

/* Rabbit Hole Digital — Colour system
   Mood: engineered depth. The system ALTERNATES between light and dark sections;
   neither is forced as the global default. Blue-grey structural greys carry the
   interface; gold is the single signal colour. No unrelated hues.

   :root       → LIGHT section tokens (cool near-white neutrals)
   .rh-dark    → DARK section tokens (deep blue-grey ink)
   Wrap any block in .rh-dark to flip it; leave it unwrapped for light. */
:root {
  /* --- Ink scale: charcoal-green, dialed back halfway toward the original blue-grey --- */
  --ink-900: #0D1213;
  --ink-850: #111719;
  --ink-800: #161D1F;
  --ink-750: #1C2325;
  --ink-700: #242C2F;
  --ink-600: #2F393B;
  --ink-500: #3E4A4C;

  /* --- Cool light neutrals --- */
  --paper:   #EEF1F4; /* cool near-white, primary light bg */
  --paper-2: #E1E6EB; /* light surface / alt band */
  --paper-3: #D2D9E0; /* light panel */

  /* --- Gold signal --- */
  --gold-300: #FFDE86;
  --gold:     #F5CB5C;
  --gold-600: #E0B443;
  --gold-700: #C89A2E;

  /* --- Semantic roles: LIGHT (default) --- */
  --bg:            var(--paper);
  --bg-alt:        var(--paper-2); /* alternating band within light */
  --surface:       #FFFFFF;
  --surface-2:     var(--paper-2);
  --surface-hover: var(--paper-2);
  --accent:        var(--gold-600); /* deepened gold for contrast on light */
  --accent-hover:  var(--gold-700);
  --accent-active: var(--gold-700);
  --on-accent:     var(--ink-900);  /* dark text on a gold fill, always */
  --accent-soft:   rgba(224, 180, 67, 0.16);

  --text-hi:    #0C0F14;
  --text:       #1E2530;
  --text-muted: #4C5766;
  --text-faint: #77828F;

  --hairline:        #DCE2E8;
  --hairline-strong: #C3CCD5;

  --focus-ring: var(--gold-600);
  --card-bg: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%);

  /* --- Status (derived, cool + one warm exception) --- */
  --ok:    #5E9E6E; /* muted sage-green, success (darkened for light bg) */
  --warn:  var(--gold-700);
  --error: #C06A48; /* muted terracotta, the one warm exception */
}

/* --- Dark section scope ---
   Same semantic tokens, on the ink base. Gold stays the accent. */
.rh-dark {
  --bg:            var(--ink-900);
  --bg-alt:        var(--ink-850);
  --surface:       var(--ink-750);
  --surface-2:     var(--ink-800);
  --surface-hover: var(--ink-700);
  --accent:        var(--gold);
  --accent-hover:  var(--gold-300);
  --accent-active: var(--gold-600);
  --on-accent:     var(--ink-900);
  --accent-soft:   rgba(245, 203, 92, 0.12);

  --text-hi:    #EEF1F5;
  --text:       #D3D9E1;
  --text-muted: #98A2B0;
  --text-faint: #626C7A;

  --hairline:        #1F2729;
  --hairline-strong: #2D383B;

  --focus-ring: var(--gold);
  --card-bg: linear-gradient(180deg, #1D2530 0%, var(--ink-750) 100%);

  --ok:    #7FB08A;
  --warn:  var(--gold-600);
  --error: #D98A6A;

  --glass: rgba(16, 20, 27, 0.55); /* dark-section glass surface */
}
/* Rabbit Hole Digital — Typography
   Display: Archivo (black, uppercase, tight) · Body: Instrument Sans
   · Mono: IBM Plex Mono (labels, eyebrows, numbered/bracket markers, terminals) */
:root {
  /* --- Families --- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Instrument Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- Weights --- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* --- Type scale: size / line-height / tracking ---
     Display — Archivo Black, uppercase, tight */
  --display-size: clamp(3.25rem, 6vw + 1rem, 5rem); /* 52→80px */
  --display-lh: 0.95; /* @kind other */
  --display-ls: -0.02em; /* @kind other */
  --display-weight: var(--weight-black);

  /* H1 */
  --h1-size: clamp(2.25rem, 3vw + 1rem, 3rem); /* 36→48px */
  --h1-lh: 1.04; /* @kind other */
  --h1-ls: -0.02em; /* @kind other */
  --h1-weight: var(--weight-bold);

  /* H2 */
  --h2-size: 2.125rem; /* 34px */
  --h2-lh: 1.1; /* @kind other */
  --h2-ls: -0.015em; /* @kind other */
  --h2-weight: var(--weight-bold);

  /* H3 */
  --h3-size: 1.5rem; /* 24px */
  --h3-lh: 1.2; /* @kind other */
  --h3-ls: -0.01em; /* @kind other */
  --h3-weight: var(--weight-semibold);

  /* Body */
  --body-size: 1rem; /* 16px */
  --body-lh: 1.65; /* @kind other */
  --body-ls: 0; /* @kind other */
  --body-weight: var(--weight-regular);

  /* Body large (intro / lede) */
  --body-lg-size: 1.1875rem; /* 19px */
  --body-lg-lh: 1.6; /* @kind other */

  /* Small / meta */
  --small-size: 0.8125rem; /* 13px */
  --small-lh: 1.5; /* @kind other */

  /* Mono label — eyebrows, tags, numbered markers */
  --mono-size: 0.75rem; /* 12px */
  --mono-lh: 1; /* @kind other */
  --mono-ls: 0.14em; /* @kind other */
  --mono-weight: var(--weight-semibold);

  /* Pull-quote — Archivo Light */
  --quote-size: clamp(1.5rem, 2vw + 1rem, 1.875rem); /* 24→30px */
  --quote-lh: 1.32; /* @kind other */
  --quote-ls: -0.01em; /* @kind other */
  --quote-weight: var(--weight-light);
}
/* Rabbit Hole Digital — Spacing & layout
   Base unit 4px. Editorial rhythm; err toward air. */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* --- Container --- */
  --container-max: 1120px;
  --container-pad-desktop: 2.5rem; /* 40 */
  --container-pad-mobile:  1.25rem; /* 20 */

  /* --- Grid --- */
  --grid-gutter: 1.5rem;   /* 24 — gap between card-row / feature-strip cells */
  --grid-gutter-tight: 1px; /* hairline-divided grid cells */
}
/* Rabbit Hole Digital — Shape & elevation
   Engineered, technical: near-sharp corners, hairline-first structure,
   restrained glow-free shadows. Depth from layering ink, not blur. */
:root {
  --radius-button: 4px;  /* buttons, inputs — crisp, near-square */
  --radius-pill:   999px; /* tags, status pills */
  --radius-card:   10px;  /* cards, panels, media */
  --radius-none:   0;    /* full-bleed / grid cells / terminals */

  --border-hairline: 1px solid var(--hairline);
  --border-strong:   1px solid var(--hairline-strong);
  --border-accent:   1px solid var(--accent);

  /* Depth on dark comes from a lifted border + faint ambient, never a soft blur */
  --shadow-sm: 0 1px 0 rgba(255,255,255,0.02), 0 4px 14px rgba(0,0,0,0.12);
  --shadow-md: 0 1px 0 rgba(255,255,255,0.03), 0 20px 48px rgba(0,0,0,0.16);
  --glow-accent: 0 0 0 1px var(--accent), 0 0 24px rgba(245,203,92,0.16);

  /* Glassmorphism — subtle, occasional (sticky nav, overlay panel, floating card).
     Pair the surface token with the blur amount. */
  --glass:       rgba(255, 255, 255, 0.55); /* on light sections */
  --glass-dark:  rgba(16, 20, 27, 0.55);    /* on dark (.rh-dark) sections */
  --glass-blur:  12px;

  /* Focus */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Motion — precise, mechanical, no bounce */
  --ease: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-fast: 110ms; /* @kind other */
  --dur: 170ms; /* @kind other */

  /* Technical motif: grid cell gutter + scanline overlay */
  --cell-line: 1px;
}

/* --- Added: tokens referenced by form fields / marquee not present in source token files --- */
:root { --surface-sunk: var(--paper-3); }
.rh-dark { --surface-sunk: var(--ink-850); }