/**
 * RSI design tokens: "Reading Room", direction A "Archival / library" (#106, #107)
 *
 * The single source of design values. Load before every other stylesheet.
 * Components use semantic names only (--color-text, not a hex or a gray step).
 *
 * Contrast ratios are WCAG relative-luminance ratios against --color-bg
 * unless noted. Palette drawn from the logo (html/lib/images/rsi.png):
 * brown ink ~#402010, oxblood ~#801515, olive ~#405020, slate-blue ~#205060.
 *
 * Dark values apply under [data-theme="dark"] only. Following the OS setting
 * (prefers-color-scheme) waits for #120, once hard-coded colours are gone (#92).
 *
 * Breakpoints: custom properties can't be used in @media, so they are listed
 * here. New queries use em so they follow text zoom: 40em (640px), 48em (768px),
 * 64em (1024px), 80em (1280px). Existing px queries in responsive.css move to
 * em as components are rebuilt (#108 onward).
 *
 * Shadows use comma rgba() rather than rgb(r g b / a): iOS Safari 12.0 doesn't
 * support the space-separated form (see Browser Support in README.md).
 */

:root {
    color-scheme: light;

    /* Color: surfaces */
    --color-bg: #fbf8f2;                 /* paper */
    --color-surface: #ffffff;            /* cards, inputs */
    --color-surface-sunken: #f3ede2;     /* wells, table stripes, code */

    /* Color: text and lines */
    --color-text: #2b1a10;               /* 15.75:1 */
    --color-text-muted: #5e4a3b;         /* 7.87:1 (7.16 on sunken) */
    --color-border: #d9cfc0;             /* decorative rules only (1.45:1) */
    --color-border-strong: #8a7663;      /* form-control borders: 4.08:1 (4.33 on surface) */

    /* Color: interactive */
    --color-primary: #7a1f1f;            /* oxblood, links and primary button: 9.70:1 */
    --color-primary-hover: #5c1414;      /* white on it 13.42:1 */
    --color-on-primary: #ffffff;         /* 10.28:1 on primary */
    --color-link-visited: #5b3463;       /* 9.36:1 */
    --color-focus: #1f5f7a;              /* focus ring with 2px offset: 6.66:1 (7.06 on surface) */
    --color-accent: #1f4e63;             /* slate-blue: 8.51:1 */
    --color-accent-2: #3d5226;           /* olive, sparing: 8.14:1 */

    /* Color: search-term highlight */
    --color-mark-bg: #f6e3a6;
    --color-mark-fg: #2b1a10;            /* 13.08:1 on mark-bg */

    /* Color: status (fg on its own bg) */
    --color-success-fg: #2f5d2a;  --color-success-bg: #eaf2e3;   /* 6.73:1 */
    --color-warning-fg: #6b4100;  --color-warning-bg: #fbf0d9;   /* 7.80:1 */
    --color-danger-fg: #8f1d1d;   --color-danger-bg: #fbe9e7;    /* 7.58:1 */
    --color-info-fg: #1f4e63;     --color-info-bg: #e6f0f3;      /* 7.78:1 */

    /* Color: record-type badges (fg on its own bg) */
    --color-type-citation-fg: #1f4e63;    --color-type-citation-bg: #e3eef2;    /* 7.64:1 */
    --color-type-author-fg: #7a1f1f;      --color-type-author-bg: #f6e4e1;      /* 8.37:1 */
    --color-type-subject-fg: #3d5226;     --color-type-subject-bg: #e8eedc;     /* 7.27:1 */
    --color-type-periodical-fg: #5c3a12;  --color-type-periodical-bg: #f3e8d3;  /* 8.36:1 */

    /* Type: serif for reading (headings, Citation titles, formatted citations,
       prose); sans for controls (nav, forms, buttons, badges, tables, meta).
       No web fonts: Charter ships with macOS/iOS, Sitka/Cambria with Windows,
       Georgia is the floor. */
    --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --text-xs: 0.8125rem;   /* 13px, badges only */
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.875rem;
    --text-3xl: 2.25rem;

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-body: 1.6;
    --measure: 68ch;

    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Space (4px base unit) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Radius: archival means nearly square */
    --radius-sm: 2px;
    --radius: 3px;
    --radius-lg: 6px;
    --radius-pill: 999px;   /* count chips only */

    /* Elevation: rules, not shadows. --shadow-2 is for floating layers only
       (autocomplete listbox, toasts, mobile menu). */
    --shadow-1: 0 1px 2px rgba(43, 26, 16, 0.08);
    --shadow-2: 0 4px 14px rgba(43, 26, 16, 0.14);

    /* Motion: no transform hover lifts in components */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Root only: the deprecated aliases below resolve on :root, so a dark subtree
   would leave them light. Subtree theming can come after #120 removes them. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #1a1410;
    --color-surface: #241c16;
    --color-surface-sunken: #120e0b;

    --color-text: #efe6da;               /* 14.76:1 */
    --color-text-muted: #c2b3a2;         /* 8.91:1 */
    --color-border: #3d3128;
    --color-border-strong: #8c7b69;      /* 4.47:1 */

    --color-primary: #eba59c;            /* 9.03:1 */
    --color-primary-hover: #f4c2bb;      /* bg text on it 11.53:1 */
    --color-on-primary: #1a1410;
    --color-link-visited: #d2b3dc;       /* 9.75:1 */
    --color-focus: #8fc7dc;              /* 9.88:1 */
    --color-accent: #8fc7dc;
    --color-accent-2: #b9cc93;           /* 10.53:1 */

    --color-mark-bg: #d9b65a;
    --color-mark-fg: #1a1410;            /* 9.37:1 */

    --color-success-fg: #c6dfb5;  --color-success-bg: #22331c;   /* 9.38:1 */
    --color-warning-fg: #f1d49b;  --color-warning-bg: #3b2c10;   /* 9.42:1 */
    --color-danger-fg: #f5c6bf;   --color-danger-bg: #3d1715;    /* 10.30:1 */
    --color-info-fg: #bfe0ec;     --color-info-bg: #1d3a47;      /* 8.63:1 */

    --color-type-citation-fg: #bfe0ec;    --color-type-citation-bg: #1d3a47;    /* 8.63:1 */
    --color-type-author-fg: #f5c6bf;      --color-type-author-bg: #4a1d1a;      /* 9.25:1 */
    --color-type-subject-fg: #d4e2b8;     --color-type-subject-bg: #2f3d20;     /* 8.50:1 */
    --color-type-periodical-fg: #ecd5ad;  --color-type-periodical-bg: #46321a;  /* 8.48:1 */

    --shadow-1: 0 0 0 1px var(--color-border), 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 0 0 1px var(--color-border), 0 4px 14px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
    }
}

/* ---- Deprecated aliases: remove in #120 ----
   Old token names still used by responsive.css, mapped to the new tokens.
   Names marked * were used but never defined before (#89); defining them
   here fixes their rendering. Font sizes map by value, not by name, and line
   heights keep their old values, so text keeps its current size and spacing
   until the typography pass (#110). */
:root {
    --color-primary-dark: var(--color-primary-hover);
    --color-secondary: var(--color-text-muted);
    --color-text-light: var(--color-text-muted);
    --color-text-secondary: var(--color-text-muted);        /* * */

    --color-bg-alt: var(--color-surface-sunken);
    --color-bg-secondary: var(--color-surface-sunken);      /* * */
    --color-hover: var(--color-surface-sunken);
    --color-white: var(--color-surface);                    /* * */

    --color-border-light: var(--color-border);              /* * */
    --color-gray-light: var(--color-border);                /* * */
    --color-gray-100: var(--color-surface-sunken);
    --color-gray-200: var(--color-border);
    --color-gray-300: var(--color-border-strong);
    --color-gray-400: var(--color-border-strong);
    --color-gray-500: var(--color-border-strong);
    --color-gray-600: var(--color-text-muted);
    --color-gray-700: var(--color-text-muted);
    --color-gray-800: var(--color-text);
    --color-gray-900: var(--color-text);

    --color-error: var(--color-danger-fg);
    --color-danger: var(--color-danger-fg);                 /* * */
    --color-success: var(--color-success-fg);
    --color-warning: var(--color-warning-fg);
    --color-info: var(--color-info-fg);

    --color-citation: var(--color-type-citation-bg);
    --color-citation-text: var(--color-type-citation-fg);
    --color-author: var(--color-type-author-bg);
    --color-author-text: var(--color-type-author-fg);
    --color-subject: var(--color-type-subject-bg);
    --color-subject-text: var(--color-type-subject-fg);
    --color-periodical: var(--color-type-periodical-bg);
    --color-periodical-text: var(--color-type-periodical-fg);

    --font-family: var(--font-sans);
    --font-family-sans: var(--font-sans);                   /* * */
    --font-size-xs: var(--text-xs);                         /* * */
    --font-size-sm: var(--text-sm);
    --font-size-base: var(--text-base);
    --font-size-lg: var(--text-md);       /* 1.125rem */
    --font-size-xl: var(--text-lg);       /* 1.25rem */
    --font-size-2xl: var(--text-xl);      /* 1.5rem */
    --font-size-3xl: var(--text-2xl);     /* 1.875rem */

    --line-height-tight: 1.25;      /* #110 moves to --leading-tight (1.2) */
    --line-height-normal: 1.5;      /* #110 moves to --leading-body (1.6) */
    --line-height-relaxed: 1.75;    /* #110 moves to --leading-body (1.6) */

    --border-radius: var(--radius);                         /* * */
    --radius-md: var(--radius-lg);
    --radius-full: var(--radius-pill);                      /* * */

    --transition-fast: var(--duration-fast) var(--ease-standard);
    --transition-base: var(--duration-base) var(--ease-standard);
    --transition-normal: var(--duration-base) var(--ease-standard);  /* * */
    --transition-slow: var(--duration-base) var(--ease-standard);

    --shadow-sm: var(--shadow-1);
    --shadow: var(--shadow-1);
    --shadow-md: var(--shadow-1);
    --shadow-lg: var(--shadow-2);
}