/* ============================================================
   Kathleen Goble — Design System
   colors_and_type.css

   Voice anchor: observer / analyst. Dry. Editorial.
   Visual anchor: oxford navy + ink black, struck through with
   constitutional parchment and a thin filament of AI neon.
   ============================================================ */

/* All four brand families self-hosted from fonts/ — no CDN dependency. */

/* Display — Oswald Regular */
@font-face {
  font-family: 'Oswald';
  src: url('fonts/Oswald-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Body — Newsreader (variable, opsz + wght) */
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-Italic.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* Mono — JetBrains Mono (variable, wght) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

/* Personal signature — Sand Dunes (only for "Kathleen Goble" wordmark). */
@font-face {
  font-family: 'Sand Dunes';
  src: url('fonts/SandDunes.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Core ink + paper ---------- */
  --ink-900:        #07090E;   /* deepest — page background, headers */
  --ink-800:        #0B1220;   /* near-black with a navy bias        */
  --ink-700:        #111A2E;
  --navy-900:       #0A1B3D;   /* oxford navy — primary brand        */
  --navy-800:       #102449;
  --navy-700:       #1A3367;
  --navy-600:       #2A4A85;

  /* ---------- Parchment ---------- */
  --parchment-100:  #F4EAD0;   /* aged paper highlight               */
  --parchment-200:  #E8DCB8;
  --parchment-300:  #D6C496;   /* mid parchment, body on dark        */
  --parchment-400:  #B89F6B;
  --parchment-500:  #8B7548;

  /* ---------- Old Glory red — restrained, oxidized ---------- */
  --red-700:        #8E1B2A;   /* deep — primary accent — only red used */

  /* ---------- AI neon — accents, never primaries ---------- */
  --neon-cyan:      #5BE9FF;   /* "revelation" highlight  — signature */
  --neon-amber:     #FFB347;   /* warm signal — rare, for one moment   */

  /* ---------- Cream / type tones on dark ---------- */
  --cream:          #F5EFE0;
  --cream-dim:      #D9D2BF;
  --cream-2:        #E1D9C2;   /* secondary type — brighter, still distinct */

  /* ---------- Semantic surfaces ----------
     The brand reads as oxford navy, not near-black.
     Favor navy-900 (page), navy-800 (cards), ink-700 (alt elev). */
  --bg:             var(--navy-900);   /* primary page surface */
  --bg-elev-1:      var(--navy-800);   /* cards, raised panels */
  --bg-elev-2:      var(--ink-700);    /* alt elevation / footer wash */
  --bg-deep:        var(--ink-900);    /* reserve — rare; on-cyan text only */
  --bg-paper:       var(--parchment-100);   /* parchment surfaces  */
  --surface-line:   rgba(217, 210, 191, 0.14);

  /* ---------- Semantic text ---------- */
  --fg-1:           var(--cream);           /* primary on dark     */
  --fg-2:           var(--cream-2);         /* secondary on dark — brighter than dim */
  --fg-3:           var(--parchment-400);   /* tertiary / captions */
  --fg-ink-1:       var(--ink-900);         /* primary on paper    */
  --fg-ink-2:       #2A3242;
  --fg-ink-3:       #5A6275;

  /* ---------- Accent tokens ---------- */
  --accent-primary:   var(--neon-cyan);
  --accent-secondary: var(--red-700);
  --accent-warm:      var(--neon-amber);

  /* ---------- Type families ---------- */
  --font-display:    'Oswald', 'Impact', 'Anton', sans-serif;
  --font-body:       'Newsreader', 'Source Serif Pro', Georgia, serif;
  --font-mono:       'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --font-personal:   'Sand Dunes', 'Caveat', 'Brush Script MT', cursive;
  --font-ui:         'Newsreader', Georgia, serif;

  /* ---------- Type scale (1.25 minor-third) ---------- */
  --fs-xs:    12px;
  --fs-sm:    15px;
  --fs-base:  18px;
  --fs-md:    19px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;
  --fs-6xl:   120px;

  /* ---------- Spacing (4px base) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 144px;

  /* ---------- Radii (restrained — editorial, not rounded-saas) ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ---------- Shadows + glow ---------- */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset,
                 0 30px 60px -30px rgba(0,0,0,0.6);
  --shadow-paper: 0 24px 60px -24px rgba(0,0,0,0.55),
                  0 2px 0 rgba(0,0,0,0.15);
  --glow-cyan:  0 0 24px rgba(91,233,255,0.45),
                0 0 1px rgba(91,233,255,0.9);
  --glow-cyan-soft: 0 0 32px rgba(91,233,255,0.25);

  /* ---------- Borders ---------- */
  --hairline:      1px solid var(--surface-line);
  --hairline-warm: 1px solid rgba(214, 196, 150, 0.20);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
}

/* ============================================================
   Semantic element styles
   Use these classes anywhere you'd otherwise reach for inline
   font-size / weight / color tokens.
   ============================================================ */

.kg-display,
h1.kg {
  font-family: var(--font-display);
  font-weight: 400;
  font-stretch: 100%;
  font-size: clamp(48px, 7vw, var(--fs-6xl));
  line-height: 0.96;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.kg-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.kg-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: var(--fg-1);
}

.kg-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

.kg-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

.kg-eyebrow--ink {
  color: var(--red-700);
}

.kg-lede,
p.kg-lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--fg-1);
  text-wrap: pretty;
}

.kg-body,
p.kg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}

.kg-small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-3);
}

.kg-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--fg-2);
}

.kg-pull-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: 1.25;
  color: var(--fg-1);
  text-wrap: balance;
}

a.kg-link {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--accent-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}
a.kg-link:hover { text-decoration-color: var(--fg-1); }

/* Selection sits in cyan so the AI accent reads consistently */
::selection { background: var(--neon-cyan); color: var(--ink-900); }