/* =====================================================================
   THE COMPUTER GHOST — design tokens
   Cream paper, charcoal ink, lavender headings, gold leaf buttons.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@400;500;600&display=swap');

:root {
  /* ---------- Color: surfaces ---------- */
  --bg:           #FDF6E3;   /* soft cream — primary surface */
  --bg-alt:       #F5F0E8;   /* warm light grey — secondary */
  --bg-paper:     #FBF1D9;   /* warmer cream — pull-quote, hero */
  --surface-card: #FFFBF0;   /* slightly lifted cream */

  /* ---------- Color: ink ---------- */
  --ink:          #2C2C2C;   /* charcoal — body */
  --ink-soft:     #4A4540;   /* warm charcoal — secondary copy */
  --ink-mute:     #7A7065;   /* warm grey — captions, labels */

  /* ---------- Color: brand ---------- */
  --lavender:     #6A4C93;   /* primary heading color */
  --lavender-deep:#523578;   /* hover / press */
  --plum:         #8B5F8C;   /* alt heading */
  --gold:         #E8A359;   /* button / accent */
  --gold-deep:    #D08F44;   /* button hover */
  --gold-press:   #B87A30;   /* button press */
  --sage:         #8BA888;   /* accent */
  --rose:         #D4A5A5;   /* accent */
  --indigo:       #3B2F63;   /* links */
  --indigo-hover: #281F4A;

  /* ---------- Navy palette (PRIMARY — matches the cover) ---------- */
  --navy:         #1A2A4A;   /* PRIMARY site background */
  --navy-deep:    #0B1028;   /* deeper navy — vignette, hero */
  --navy-darkest: #050818;   /* darkest edges */
  --navy-card:    #233556;   /* lifted surface on navy */
  --navy-card-2:  #2C406A;   /* alt card / hover */
  --navy-border:  rgba(232, 236, 248, 0.14);
  --navy-border-strong: rgba(232, 236, 248, 0.28);
  /* legacy aliases (kept so older selectors keep working) */
  --night:        #1A2A4A;
  --night-deep:   #0B1028;
  --night-soft:   #233556;
  /* Text on navy — never pure white */
  --night-ink:    #E8ECF8;   /* primary body text on navy (off-white) */
  --night-ink-2:  #C9D1E4;   /* secondary text */
  --night-mute:   rgba(232, 236, 248, 0.62);
  --night-border: rgba(232, 236, 248, 0.14);
  /* Chrome / silver — title type */
  --chrome-1:     #FFFFFF;
  --chrome-2:     #C8D4E8;
  --chrome-3:     #6F7FA0;
  --chrome-4:     #DCE5F2;
  /* Glow accents */
  --glow:         #B8D4FF;
  --glow-warm:    #FFE9C4;

  /* ---------- Color: utility ---------- */
  --border:       #E4D9C3;   /* warm tan hairline */
  --border-soft:  #EFE5CF;
  --shadow-warm:  rgba(80, 50, 20, 0.10);
  --shadow-card:  0 2px 8px rgba(60, 40, 20, 0.08);
  --shadow-lift:  0 8px 24px rgba(60, 40, 20, 0.10);

  /* ---------- Type: families ---------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-ui:      'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- Type: scale (desktop) ---------- */
  --fs-display:   64px;   /* hero */
  --fs-h1:        48px;
  --fs-h2:        32px;
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-body:      19px;
  --fs-body-sm:   17px;
  --fs-label:     14px;
  --fs-caption:   13px;

  --lh-tight:     1.15;
  --lh-snug:      1.3;
  --lh-body:      1.65;
  --lh-loose:     1.8;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;   /* small caps labels */

  /* ---------- Spacing (8px grid) ---------- */
  --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: 128px;

  /* ---------- Radii ---------- */
  --r-button: 4px;
  --r-card:   8px;
  --r-pill:   999px;
  --r-image:  0px;     /* sharp paper edges */

  /* ---------- Layout ---------- */
  --measure-prose:  680px;
  --measure-page:   960px;
  --gutter:         24px;

  /* ---------- Motion ---------- */
  --ease:           cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:       150ms;
  --dur:            250ms;
  --dur-slow:       400ms;
}

@media (max-width: 720px) {
  :root {
    --fs-display: 40px;
    --fs-h1:      34px;
    --fs-h2:      26px;
    --fs-h3:      22px;
    --fs-body:    17px;
    --gutter:     20px;
  }
}

/* =====================================================================
   Semantic element styles
   Drop this stylesheet into a page and it will look correct out of the box.
   ===================================================================== */

html, body {
  background: var(--navy);
  color: var(--night-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--chrome-2);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); color: var(--chrome-4); }
h4 { font-size: var(--fs-h4); color: var(--chrome-4); font-weight: 500; }

p {
  margin: 0 0 var(--s-5);
  text-wrap: pretty;
  max-width: var(--measure-prose);
  color: var(--night-ink);
}

a {
  color: var(--glow);
  text-decoration-color: rgba(184, 212, 255, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
a:hover {
  color: var(--glow-warm);
  text-decoration-color: var(--glow-warm);
  text-decoration-thickness: 2px;
}

em, i { font-style: italic; }
strong, b { font-weight: 600; color: var(--chrome-1); }

blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--chrome-2);
  line-height: var(--lh-snug);
  border-left: 2px solid var(--gold);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  margin: var(--s-7) 0;
  max-width: var(--measure-prose);
}

hr.ornament {
  border: 0;
  text-align: center;
  margin: var(--s-7) 0;
  color: var(--gold);
  font-size: var(--fs-h4);
}
hr.ornament::before { content: '✦  ❦  ✦'; letter-spacing: 0.6em; }

code, kbd, samp {
  font-family: 'JetBrains Mono', 'Source Code Pro', ui-monospace, monospace;
  font-size: 0.92em;
  background: var(--navy-card);
  border: 1px solid var(--navy-border);
  color: var(--night-ink);
  padding: 0.1em 0.4em;
  border-radius: 3px;
}

/* ---------- UI labels ---------- */
.label-ui {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--night-mute);
  font-weight: 500;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border-radius: var(--r-button);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
  text-decoration: none;
}
.btn-primary {
  background: var(--gold);
  color: #3A2410;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.7);
}
.btn-primary:hover { background: var(--gold-deep); }
.btn-primary:active {
  background: var(--gold-press);
  transform: translateY(1px);
}
.btn-secondary {
  background: transparent;
  color: var(--chrome-2);
  border-color: rgba(232, 236, 248, 0.4);
}
.btn-secondary:hover {
  background: rgba(232, 236, 248, 0.08);
  color: var(--chrome-1);
  border-color: rgba(232, 236, 248, 0.7);
}
.btn-ghost {
  background: transparent;
  color: var(--night-ink-2);
  padding: 10px 14px;
}
.btn-ghost:hover { color: var(--chrome-1); background: rgba(232, 236, 248, 0.06); }

/* ---------- Card ---------- */
.card {
  background: var(--navy-card);
  border: 1px solid var(--navy-border);
  border-radius: var(--r-card);
  padding: var(--s-6);
  box-shadow: 0 4px 16px rgba(5, 8, 24, 0.4);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(5, 8, 24, 0.5);
  border-color: var(--navy-border-strong);
}

/* ---------- Drop cap ---------- */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.12em -0.05em 0;
  color: var(--gold);
}

/* ---------- Selection ---------- */
::selection {
  background: rgba(232, 163, 89, 0.45);
  color: var(--chrome-1);
}

/* ---------- Cream surface (secondary, for prose-only pages) ---------- */
.surface-cream {
  background: var(--bg);
  color: var(--ink);
}
.surface-cream h1, .surface-cream h2, .surface-cream h3,
.surface-cream h4, .surface-cream h5, .surface-cream h6 { color: var(--lavender); }
.surface-cream h3, .surface-cream h4 { color: var(--plum); }
.surface-cream p { color: var(--ink); }
.surface-cream a { color: var(--indigo); text-decoration-color: rgba(59, 47, 99, 0.35); }
.surface-cream a:hover { color: var(--indigo-hover); text-decoration-color: var(--indigo); }
.surface-cream strong, .surface-cream b { color: var(--ink); }
.surface-cream blockquote { color: var(--lavender); }