/*
 * My Next Book — design tokens + shared baseline.
 * Linked by every public HTML page; page-specific styles stay inline.
 */

:root {
  /* Honour the system appearance; lets form controls, scrollbars and the
     UA's own chrome flip alongside the dark-mode token overrides below. */
  color-scheme: light dark;

  /* Surfaces — body is the committed warm taupe; cards inside are near-white */
  --body:         oklch(0.86  0.025 50);   /* warm taupe — the brand's own warmth as the surface */
  --surface:      oklch(0.985 0.003 50);   /* near-white card (landing, modals) */
  --surface-2:    oklch(0.955 0.014 50);   /* subtly recessed panel inside a card */
  --border:       oklch(0.78  0.020 50);   /* visible against both surface and body */
  --border-soft:  oklch(0.83  0.014 50);   /* quiet row separators */

  /* Type ramp — verified against --body (taupe) AND --surface (near-white) */
  --ink:          oklch(0.22  0.025 50);   /* ~7:1 on body, ~14:1 on surface */
  --ink-muted:    oklch(0.40  0.018 50);   /* ~4.6:1 on body, ~5.4:1 on surface */
  --ink-quiet:    oklch(0.48  0.015 50);   /* AA-large only, easter eggs / fine print */
  --ink-faint:    oklch(0.60  0.012 50);   /* placeholders, decoration */

  /* The one earned accent */
  --accent:        oklch(0.69 0.15 50);    /* same hue as the prior #E67E22 */
  --accent-hover:  oklch(0.60 0.16 50);
  --accent-soft:   oklch(0.95 0.04 50);    /* tinted hover wash, not body */

  /* Semantic */
  --info:        oklch(0.55 0.11 230);
  --danger:      oklch(0.55 0.18 25);
  --danger-soft: oklch(0.95 0.04 25);
  --danger-deep: oklch(0.38 0.18 25);
  --star:        oklch(0.83 0.16 90);

  /* Structural */
  --header-bg:   oklch(0.22 0.025 50);

  /* Elevation & focus — extracted from repeated inline use across pages */
  --shadow-card: 0 1px 2px oklch(0.18 0.03 50 / 0.06), 0 8px 28px oklch(0.18 0.03 50 / 0.06);
  --focus-ring:  0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);

  /* Type — system pairing: warm serif for display, system sans for everything else */
  --font-display: ui-serif, 'New York', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — fixed rem, ~1.25 ratio between most steps */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-md:   1.125rem;    /* 18px */
  --text-lg:   1.375rem;    /* 22px */
  --text-xl:   1.75rem;     /* 28px */
  --text-2xl:  clamp(2rem, 6.5vw, 2.75rem);  /* 32 → 44px */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
  font-family: var(--font-sans);
  background: var(--body);
  color: var(--ink);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

/*
 * Dark mode — a warm night reading-light, not cold glass. The neutrals keep
 * hue 50 so the page still feels like paper, just dimmed: a dark warm body,
 * cards lifted a step above it, and a light warm ink ramp. Only tokens that
 * carry lightness flip; the brand accent keeps its hue and is nudged a
 * touch brighter to stay legible on the dark surfaces. Everything else
 * inherits automatically from these token redefinitions.
 */
@media (prefers-color-scheme: dark) {
  :root {
    /* Surfaces — warm near-black paper; cards rest a step above the body */
    --body:         oklch(0.165 0.010 50);   /* dimmed warm paper, not pure black */
    --surface:      oklch(0.215 0.011 50);   /* card lifted above the body */
    --surface-2:    oklch(0.255 0.013 50);   /* distinct sub-panel inside a card */
    --border:       oklch(0.38  0.012 50);   /* visible hairline against surface */
    --border-soft:  oklch(0.31  0.010 50);   /* quiet row separators */

    /* Type ramp — light warm ink, verified against --body and --surface */
    --ink:          oklch(0.93  0.010 50);   /* primary text */
    --ink-muted:    oklch(0.74  0.012 50);   /* secondary text */
    --ink-quiet:    oklch(0.63  0.012 50);   /* tertiary / fine print */
    --ink-faint:    oklch(0.52  0.010 50);   /* placeholders, decoration */

    /* The accent and its washes — hue held, lightness retuned for the dark */
    --accent:        oklch(0.72 0.15 50);
    --accent-hover:  oklch(0.78 0.15 50);    /* hover lifts brighter on dark */
    --accent-soft:   oklch(0.32 0.045 50);   /* dark tinted wash, not a light one */

    /* Semantic — lifted for contrast on the dark body */
    --info:        oklch(0.68 0.11 230);
    --danger:      oklch(0.66 0.17 25);
    --danger-soft: oklch(0.32 0.060 25);
    --danger-deep: oklch(0.72 0.15 25);
    --star:        oklch(0.85 0.16 90);

    /* Structural — header band stays a touch above the body so it still
       reads as a band rather than merging into the page. */
    --header-bg:   oklch(0.235 0.018 50);

    /* Elevation — soft ink shadows vanish on a dark page, so lean on a
       deeper, near-black drop to give the card and modal their lift. */
    --shadow-card: 0 1px 2px oklch(0 0 0 / 0.45), 0 10px 30px oklch(0 0 0 / 0.55);
  }
}