/* ==========================================================================
   LoveToRead — design tokens ("Bedtime, bound")            rebrand 2026-09-02
   Loaded LAST on every page so its variables win over the per-page :root blocks
   that the old green theme left behind. Keep this file small and boring.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Young+Serif&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Caveat:wght@500;600&family=Kaushan+Script&display=swap");

:root {
    color-scheme: light;

    /* ink & paper */
    --ink: #22263A;
    --ink-soft: #464B60;
    --muted: #6B7086;
    --paper: #FFFDF8;
    --oat: #F3EDE2;
    --oat-deep: #E9E0D0;
    --rule: #DCD4C4;
    --card: #FFFFFF;

    /* night */
    --night: #1B2340;
    --night-soft: #262F52;
    --on-night: #F4F1EA;
    --on-night-muted: #B7BDD6;

    /* colour */
    --lagoon: #0E7C86;
    --lagoon-deep: #0A5F67;
    --lagoon-tint: #DDF1F2;
    --marigold: #FFB100;
    --marigold-deep: #D99A00;
    --marigold-tint: #FFF1C9;
    --raspberry: #E0457B;
    --raspberry-tint: #FBE1EA;
    --moss: #3E7C59;
    --moss-tint: #E1F0E6;
    --danger: #C2413B;
    --danger-tint: #FBE7E5;

    /* text roles */
    --text: var(--ink);
    --text-soft: var(--ink-soft);
    --text-muted: var(--muted);
    --on-accent: #FFFFFF;

    /* type */
    --display: "Young Serif", Georgia, "Times New Roman", serif;
    --body: "Atkinson Hyperlegible", "Segoe UI", Helvetica, Arial, sans-serif;
    --hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
    --script: "Kaushan Script", "Brush Script MT", "Segoe Script", cursive;

    /* shape */
    --radius-xs: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --pill: 999px;
    --shadow-soft: 0 1px 2px rgba(34, 38, 58, .06), 0 10px 30px -12px rgba(34, 38, 58, .18);
    --shadow-book: 0 2px 4px rgba(34, 38, 58, .10), 0 22px 40px -18px rgba(34, 38, 58, .35);
    --shadow-lift: 0 4px 10px rgba(34, 38, 58, .08), 0 30px 50px -24px rgba(34, 38, 58, .32);

    /* layout */
    --maxw: 1240px;
    --nav-h: 72px;
    --gutter: clamp(18px, 4vw, 40px);

    /* ---- legacy aliases: the old green theme's variable names, remapped so
       every untouched page renders in the new palette ---- */
    --primary-green: var(--lagoon);
    --primary-green-light: #2F9AA3;
    --primary-green-lighter: #66BFC6;
    --primary-green-dark: var(--lagoon-deep);
    --accent-green: #8FD0D5;
    --bg-green-light: var(--lagoon-tint);
    --bg-green-lighter: var(--oat);
    --bg-gradient: linear-gradient(180deg, var(--paper), var(--oat));

    --text-dark: var(--ink);
    --text-medium: var(--ink-soft);
    --text-light: var(--muted);
    --text-lighter: #8A8FA3;

    --white: #FFFFFF;
    --off-white: var(--paper);
    --border-light: var(--rule);
    --border-lighter: #ECE6DA;
    --border-medium: #CFC6B4;
    --gray-100: #F3EDE2;
    --gray-200: #E9E0D0;
    --gray-300: #DCD4C4;
    --gray-400: #B9B2A4;
    --gray-light: #F3EDE2;

    --shadow-xs: 0 1px 2px rgba(34, 38, 58, .05);
    --shadow-sm: 0 1px 2px rgba(34, 38, 58, .06), 0 4px 10px -6px rgba(34, 38, 58, .12);
    --shadow-md: var(--shadow-soft);
    --shadow-lg: var(--shadow-book);
    --shadow-xl: var(--shadow-lift);

    --transition-fast: .2s ease;
    --transition-normal: .3s ease;
    --transition-slow: .5s ease;

    --border-radius-sm: var(--radius-xs);
    --border-radius-md: var(--radius);
    --border-radius-lg: var(--radius-lg);
    --border-radius-xl: var(--radius-xl);
    --radius-sm: var(--radius-xs);
    --radius-md: var(--radius);
    --radius-2xl: var(--radius-xl);
    --radius-full: var(--pill);

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    --success-green: var(--moss);
    --success-color: var(--moss);
    --success-bg: var(--moss-tint);
    --error-red: var(--danger);
    --error-color: var(--danger);
    --error-bg: var(--danger-tint);
    --warning-color: var(--marigold-deep);
    --info-color: var(--lagoon);

    --gold: var(--marigold);
    --gold-light: var(--marigold-tint);
    --gold-dark: var(--marigold-deep);
    --story-credit-color: var(--lagoon);
    --page-credit-color: var(--marigold-deep);
    --character-credit-color: var(--raspberry);

    --bedtime-purple: var(--night-soft);
    --bedtime-blue: #3E4A7A;
    --bedtime-night: var(--night);
}

/* ---- base element styles: the paper ground and the two faces ---- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; min-height: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    font-family: var(--body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, .lt-display {
    font-family: var(--display);
    font-weight: 400 !important;
    letter-spacing: -0.01em;
    line-height: 1.12;
    text-wrap: balance;
    color: var(--ink);
}
h4, h5, h6 { font-family: var(--body); font-weight: 700; }
a { color: var(--lagoon); }
img, svg, video { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
::selection { background: var(--marigold-tint); }
.lt-hand { font-family: var(--hand); }