/*
 * base.css — design tokens + shared page styles for all pages
 * (index / about / book / gallery).
 *
 * Color tokens are CSS variables ("R G B" triplets) consumed by
 * tailwind.config.js via `rgb(var(--x) / <alpha-value>)`.
 * ":root" holds the canonical light palette; ".dark" flips it.
 * Load after fonts.css.
 */

/* ---- Design tokens: light (canonical) ---- */
:root {
    color-scheme: light;
    --surface: 248 249 250;                   /* #f8f9fa */
    --surface-dim: 209 220 224;               /* #d1dce0 */
    --surface-container-lowest: 255 255 255;  /* #ffffff */
    --surface-container-low: 241 244 246;     /* #f1f4f6 */
    --surface-container-high: 227 233 236;    /* #e3e9ec */
    --surface-container-highest: 219 228 231; /* #dbe4e7 */
    --on-surface: 43 52 55;                   /* #2b3437 */
    --on-surface-variant: 88 96 100;          /* #586064 */
    --primary: 84 95 115;                     /* #545f73 */
    --primary-dim: 72 83 103;                 /* #485367 */
    --on-primary: 246 247 255;                /* #f6f7ff */
    --primary-container: 216 227 251;         /* #d8e3fb */
    --on-primary-container: 71 82 102;        /* #475266 */
    --tertiary: 82 96 115;                    /* #526073 */
    --outline: 115 124 127;                   /* #737c7f */
    --outline-variant: 171 179 183;           /* #abb3b7 */
}

/* ---- Design tokens: dark (provisional — tuned from the original dark
 *      hexes #1a2123 / #2b3437 / #e3e9ec + an MD3-style ramp) ---- */
.dark {
    color-scheme: dark;
    --surface: 26 33 35;                      /* #1a2123 */
    --surface-dim: 16 22 24;                  /* #101618 */
    --surface-container-lowest: 21 27 29;     /* #151b1d */
    --surface-container-low: 30 36 39;        /* #1e2427 */
    --surface-container-high: 38 46 49;       /* #262e31 */
    --surface-container-highest: 43 52 55;    /* #2b3437 */
    --on-surface: 227 233 236;                /* #e3e9ec */
    --on-surface-variant: 185 194 199;        /* #b9c2c7 */
    --primary: 174 189 210;                   /* #aebdd2 */
    --primary-dim: 152 167 190;               /* #98a7be */
    --on-primary: 21 28 34;                   /* #151c22 */
    --primary-container: 62 74 92;            /* #3e4a5c */
    --on-primary-container: 214 227 251;      /* #d6e3fb */
    --tertiary: 172 184 200;                  /* #acb8c8 */
    --outline: 148 157 160;                   /* #949da0 */
    --outline-variant: 82 91 94;              /* #525b5e */
}

body {
    font-family: 'Manrope', sans-serif;
    background-color: rgb(var(--surface));
    color: rgb(var(--on-surface));
}

/* Headings + serif utility + page titles use the Newsreader display face. */
h1, h2, h3, #page-title, .font-serif {
    font-family: 'Newsreader', serif;
}

/* Material Symbols Outlined (icon CSS is loaded on pages that use icons). */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Media: keep images from overflowing their containers. */
img {
    max-width: 100%;
    height: auto;
}