/*
 * Design tokens for the VMLT reader UI. Every colour, font and size a page or component uses
 * comes from here; pages never hard-code values. Reference: docs/design/DESIGN.md.
 *
 * Theme:   html[data-theme="light"|"dark"]  (the resolved theme; set before first paint by the
 *          inline script in _Layout from localStorage vm.settings, "system" follows the OS).
 *          Without JS the OS preference applies through prefers-color-scheme.
 * Reader settings (same script, see js/core/settings.js):
 *          html[data-text-size="0".."4"]  html[data-leading="0".."2"]
 *          html[data-font="serif"|"sans"] html[data-script="deva"|"iast"|"both"]
 */

/* ---------------------------------------------------------------------------------------- */
/* Theme-independent tokens                                                                  */
/* ---------------------------------------------------------------------------------------- */
:root {
  /* Families. Devanagari is listed in the Latin stacks so mixed text picks Tiro per glyph.
     'EB Garamond 12' only draws letters with combining marks EB Garamond lacks (r̥, fonts.css). */
  --font-reading: 'EB Garamond', 'EB Garamond 12', 'Tiro Devanagari Sanskrit', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-display: 'EB Garamond', 'EB Garamond 12', 'Tiro Devanagari Sanskrit', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Tiro Devanagari Sanskrit', sans-serif;
  --font-deva: 'Tiro Devanagari Sanskrit', 'EB Garamond', 'EB Garamond 12', 'Noto Serif Devanagari', serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* UI type scale (Inter). Sizes measured from the reference at 1x. */
  --fs-2xs: 10.5px;   /* caps section headings in the TOC */
  --fs-xs: 11px;      /* kicker, small pills, captions */
  --fs-sm: 12px;      /* meta lines, pills, tooltips */
  --fs-ui: 13.5px;    /* nav, sidebar items, buttons, inputs */
  --fs-segment: 12.5px; /* segmented controls */
  --fs-search: 13px;  /* header search field */
  --fs-ui-lg: 14px;   /* search result titles, find results */
  --fs-md: 15px;      /* dialog/body UI text */
  --fs-lg: 17px;      /* state titles, dialog titles */
  --fs-input-touch: 16px; /* text fields on phones: iOS zooms into anything smaller */
  --fs-stepper: 19px; /* the large "A" of the text-size stepper (EB Garamond) */

  /* Display scale (EB Garamond). */
  --fs-wordmark: 32px;          /* 22px caps, as the reference's masthead */
  --fs-wordmark-compact: 26px;  /* desktop reader headers 1200–1319px */
  --fs-wordmark-phone: 21px;    /* phones and the drawer head (the tag still clears the search icon at 360px) */
  --fs-sidebar-title: 24px;
  --fs-h3: 24px;
  --fs-h2: 30px;
  --fs-article-title: 36px;   /* article title above the prose */
  --fs-display: 48px;         /* volume / book title at the top of the reading column */
  --fs-divider: 19px;         /* tracked caps date / section divider (Inter 600) */
  --fs-kicker: 11.5px;
  --fs-wordmark-tag: 11px;    /* "LIBRARY" tag after the wordmark (Inter caps, like the kicker) */
  --fs-dialog-title: 22px;
  --fs-snippet: 14.5px;       /* search snippets, citations (EB Garamond) */

  --tracking-caps: 0.2em;     /* kicker, TOC headings */
  --tracking-meta: 0.1em;     /* meta lines in caps */
  --tracking-divider: 0.26em;

  --weight-ui: 400;
  --weight-ui-strong: 500;
  --weight-caps: 600;

  /* Spacing (4px grid). */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Shape. */
  --radius-pill: 999px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --border-w: 1px;

  /* Layout. */
  --header-h: 56px;
  --sidebar-w: 288px;
  --bottombar-h: 56px;        /* phone view-mode bar */
  --pane-pad-x: 48px;         /* reading column side padding */
  --control-h: 36px;          /* header controls: segmented, search */
  --pill-h: 30px;
  --pill-h-sm: 26px;
  --icon-btn: 36px;           /* square icon buttons */
  --tap-min: 0px;             /* minimum touch box (coarse pointers: 40px, see the end of this file) */
  --icon: 18px;
  --icon-sm: 16px;

  /* Reading text. Size and leading come from the reader settings below. */
  --reading-base: 19.5px;
  --reading-scale: 1;
  --reading-size: calc(var(--reading-base) * var(--reading-scale));
  --reading-leading: 1.625;
  --measure: calc(var(--reading-size) * 35);   /* about 68 characters per line */
  --para-space: 0.9em;

  /* Motion. */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* Stacking. */
  --z-sticky: 10;
  --z-header: 30;
  --z-drawer: 40;
  --z-popover: 50;
  --z-dialog: 60;
  --z-toast: 70;
  --z-progress: 80;

  /* The scan pane is dark in both themes. */
  --scan-bg: #262420;
  --scan-toolbar-bg: #211f1b;
  --scan-control-bg: #332f2a;
  --scan-active-bg: #3c2f2a;
  --scan-fg: #c9c4b8;
  --scan-fg-muted: #8d887d;
  --scan-icon: var(--scan-fg);
  --scan-muted: var(--scan-fg-muted);
  --scan-accent: #e0856b;     /* the dark-theme accent: the pane is dark in both themes */
  --scan-border: #34312b;
  --scan-paper: #fff;               /* behind a loaded page image */
  --scan-placeholder: #2d2a25;      /* a page or thumbnail still loading */
  --scan-placeholder-fg: #5d574d;   /* its page number */
  --scan-scrollbar: #4a463f;
  --scan-tip-bg: #0f0e0c;           /* toolbar tooltips */
  --scan-tip-fg: #ece9df;
  /* Soft and short: it lifts the paper without darkening the 16px gutter around it. */
  --shadow-paper: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 10px rgba(0, 0, 0, .18);
}

/* ---------------------------------------------------------------------------------------- */
/* Light (default)                                                                           */
/* ---------------------------------------------------------------------------------------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg-header: #f6f1e7;
  --bg-reading: #fbfaf3;
  --bg-sidebar: #f8f3e9;
  --bg-elevated: #fffdf8;     /* popovers, menus, dialogs */
  --border: #e4e1d5;
  --text: #2a1f10;
  --text-title: #1e1c16;
  --text-sidebar: #68534a;
  --text-muted: #736c63;      /* brief: #7f786f, darkened for WCAG AA (4.7:1 on the sidebar) */
  --text-caps: #776a5f;       /* brief: #7e7065, darkened for WCAG AA */
  --text-nav: #605a51;
  --icon-header: #5e5950;     /* header icons (menu, settings): as sampled from the reference */
  --accent: #b54932;
  --accent-soft: rgba(181, 73, 50, .09);
  --accent-fg: #fffaf2;       /* text on a solid accent background */
  --control-bg: #fbfaf3;
  --control-border: #e0dcd2;
  --rule: #d8d3c8;
  --hover-bg: rgba(42, 31, 16, .05);
  --current-bg: rgba(42, 31, 16, .07);
  --segment-on-bg: #22201b;
  --segment-on-fg: #f6f1e7;
  --mark-bg: #f3dca6;
  --mark-fg: #2a1f10;
  --mark-current-bg: #e9b871;
  --mark-current-fg: #2a1f10;
  --focus-ring: #b54932;
  --danger: #a3302a;
  --success: #3f6a3a;
  --scrim: rgba(30, 28, 22, .32);
  --scrollbar: rgba(42, 31, 16, .18);
  --scrollbar-hover: rgba(42, 31, 16, .32);
}

/* ---------------------------------------------------------------------------------------- */
/* Dark                                                                                      */
/* ---------------------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-header: #141211;
  --bg-reading: #1b1a16;
  --bg-sidebar: #211f1b;
  --bg-elevated: #25231f;
  --border: #2a2925;
  --text: #e8e6dc;
  --text-title: #eceadd;
  --text-sidebar: #cbc1a9;
  --text-muted: #8c918d;
  --text-caps: #939391;
  --text-nav: #bab9b0;
  --icon-header: #cfccc4;     /* a step brighter than the nav text: 1px icon lines read as heavy as the reference's */
  --accent: #e0856b;
  --accent-soft: rgba(224, 133, 107, .13);
  --accent-fg: #141211;
  --control-bg: #1b1a16;
  --control-border: #312f2a;
  --rule: #3a3833;
  --hover-bg: rgba(232, 230, 220, .05);
  --current-bg: rgba(232, 230, 220, .075);
  --segment-on-bg: #e8e2d4;
  --segment-on-fg: #141211;
  --mark-bg: #5b4321;
  --mark-fg: #f5ecd9;
  --mark-current-bg: #8a5a24;
  --mark-current-fg: #fff7ea;
  --focus-ring: #e0856b;
  --danger: #e5776a;
  --success: #8fbf83;
  --scrim: rgba(0, 0, 0, .5);
  --scrollbar: rgba(232, 230, 220, .16);
  --scrollbar-hover: rgba(232, 230, 220, .3);
}

/* No JS (or before the head script ran): follow the OS. This block must stay identical to the
   [data-theme="dark"] one above (VmltWebsite.Tests DesignTokensTests checks it). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg-header: #141211;
    --bg-reading: #1b1a16;
    --bg-sidebar: #211f1b;
    --bg-elevated: #25231f;
    --border: #2a2925;
    --text: #e8e6dc;
    --text-title: #eceadd;
    --text-sidebar: #cbc1a9;
    --text-muted: #8c918d;
    --text-caps: #939391;
    --text-nav: #bab9b0;
    --icon-header: #cfccc4;     /* a step brighter than the nav text: 1px icon lines read as heavy as the reference's */
    --accent: #e0856b;
    --accent-soft: rgba(224, 133, 107, .13);
    --accent-fg: #141211;
    --control-bg: #1b1a16;
    --control-border: #312f2a;
    --rule: #3a3833;
    --hover-bg: rgba(232, 230, 220, .05);
    --current-bg: rgba(232, 230, 220, .075);
    --segment-on-bg: #e8e2d4;
    --segment-on-fg: #141211;
    --mark-bg: #5b4321;
    --mark-fg: #f5ecd9;
    --mark-current-bg: #8a5a24;
    --mark-current-fg: #fff7ea;
    --focus-ring: #e0856b;
    --danger: #e5776a;
    --success: #8fbf83;
    --scrim: rgba(0, 0, 0, .5);
    --scrollbar: rgba(232, 230, 220, .16);
    --scrollbar-hover: rgba(232, 230, 220, .3);
  }
}

/* ---------------------------------------------------------------------------------------- */
/* Reader settings                                                                           */
/* ---------------------------------------------------------------------------------------- */
:root[data-text-size="0"] { --reading-scale: .87; }
:root[data-text-size="1"] { --reading-scale: .935; }
:root[data-text-size="2"] { --reading-scale: 1; }
:root[data-text-size="3"] { --reading-scale: 1.09; }
:root[data-text-size="4"] { --reading-scale: 1.2; }

:root[data-leading="0"] { --reading-leading: 1.5; }
:root[data-leading="1"] { --reading-leading: 1.625; }
:root[data-leading="2"] { --reading-leading: 1.8; }

:root[data-font="sans"] {
  --font-reading: var(--font-ui);
}

/* Phones: a slightly smaller base and tighter reading padding. */
@media (max-width: 767.98px) {
  :root {
    --reading-base: 18px;
    --pane-pad-x: 20px;
    --header-h: 52px;
    --fs-display: 38px;
    --fs-article-title: 29px;
    --fs-divider: 15px;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  :root {
    --pane-pad-x: 40px;
  }
}

/* Touch screens: every control is at least 40px tall to tap (WCAG 2.5.8 asks for 24px; 40px is
   this site's bar). Pills keep a compact look and get the rest as an invisible hit area. */
@media (pointer: coarse) {
  :root {
    --control-h: 40px;
    --pill-h: 34px;
    --pill-h-sm: 30px;
    --icon-btn: 40px;
    --tap-min: 40px;
    --bottombar-h: 60px;        /* room around the 46px Text / Scan bar */
  }
}