/* ════════════════════════════════════════════════════════════════
   VOLUMES — Design Tokens
   Typography + colour foundation for the Volumes design system.
   Two voices, two rooms (light + dark), 4dp spacing rhythm.
   ──────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Libre Baskerville";
  src: url("fonts/LibreBaskerville-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("fonts/LibreBaskerville-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("fonts/LibreBaskerville-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Typeface stacks ───────────────────────────────────────── */
  --font-serif: "Libre Baskerville", "Baskerville", "Garamond", Georgia, serif;
  --font-sans:  "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-reading-serif: "Libre Baskerville", Georgia, serif;
  --font-reading-sans:  "Source Sans 3", -apple-system, sans-serif;

  /* ── Type scale (matches Compose Typography in Type.kt) ───── */
  --text-display:  32px;  /* Libre Baskerville bold/regular  — page titles, wordmark */
  --text-headline: 24px;  /* Libre Baskerville bold/regular  — section headers */
  --text-title:    20px;  /* Source Sans 3 semibold          — card headers */
  --text-body:     16px;  /* Source Sans 3 regular           — primary content */
  --text-label:    14px;  /* Source Sans 3 regular           — form labels, captions */
  --text-small:    12px;  /* Source Sans 3 regular           — metadata, timestamps */

  --leading-reading: 1.4;  /* 140%  research-backed for comprehension */
  --leading-ui:      1.3;  /* 120-130%  compact but readable */
  --leading-tight:   1.2;

  --tracking-wordmark: 0.28em;   /* 9sp letterspacing on the wordmark */
  --tracking-tab:      0.05em;   /* paper tabs — wide, embossed */
  --tracking-label:    0.02em;
  --tracking-tight:    0;

  /* ── Light mode — The Reading Room by Day ─────────────────── */
  --ivory:          #F5F1E8;   /* aged paper          — background */
  --parchment:      #FAF7F0;   /* card surfaces       — surface */
  --pale-cream:     #EDE9E1;   /* surfaceVariant      — subtle plane shift */
  --rich-black:     #1A1A1A;   /* primary text        — onBackground */
  --pure-black:     #000000;   /* reading text        — onSurface (max contrast) */
  --warm-grey:      #6B6560;   /* tertiary text       — onSurfaceVariant */
  --burgundy:       #8B0000;   /* primary accent      — ink on a title page */
  --aged-gold:      #D4AF37;   /* tertiary accent     — brass hardware */

  /* ── Dark mode — The Private Study at Night ──────────────── */
  --deep-charcoal:   #1C1C1C;  /* polished dark wood  — background */
  --warm-charcoal:   #242424;  /* card surfaces       — surface */
  --medium-charcoal: #2C2C2C;  /* surfaceVariant */
  --warm-cream:      #F5F1E8;  /* lamplight on paper  — onBackground */
  --muted-gold:      #D4AF37;  /* brass catching light — primary */
  --sage-green:      #8FAF88;  /* secondary, sparingly */
  --medium-grey:     #4A4A4A;  /* borders, dividers */

  /* ── Semantic — outside reading mode only ────────────────── */
  --success:    #4A7C59;   /* dark moss      — quiz correct, achievements */
  --success-2:  #5A8A6A;   /* good score tier */
  --warning:    #D4A017;   /* aged amber     — attention needed */
  --error:      #A52A2A;   /* spilled ink    — quiz incorrect, failures */
  --info:       #4682B4;   /* dark steel     — neutral informational */

  /* dark-mode semantic variants — same names, lighter values */
  --success-dark:  #6BAF82;
  --warning-dark:  #E8B84A;
  --error-dark:    #DC6B6B;
  --info-dark:     #6BA3CF;

  /* ── Spacing scale — multiples of 4dp ────────────────────── */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-s:   12px;
  --space-m:   16px;
  --space-l:   24px;
  --space-xl:  32px;
  --space-xxl: 48px;

  /* ── Surface — paper plane system ────────────────────────── */
  --radius-paper:  6px;     /* barely-rounded; PaperSurface */
  --radius-tight:  4px;     /* internal chips */
  --radius-pill:   999px;   /* avatar, chips */

  /* directional shadow — light from above, falls down + slightly right */
  --shadow-paper-1: 0 1px 2px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-paper-2: 0 2px 4px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-paper-3: 0 4px 8px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-paper-dark-1: 0 1px 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.24);
  --shadow-paper-dark-2: 0 2px 4px rgba(0,0,0,0.36), 0 4px 8px rgba(0,0,0,0.28);

  /* ── Motion — paper physics ──────────────────────────────── */
  --ease-paper: cubic-bezier(0.4, 0.0, 0.2, 1);   /* FastOutSlowIn */
  --dur-screen: 200ms;
  --dur-state:  150ms;
  --dur-instant: 0ms;          /* reading mode */

  /* ── Mode-aware role tokens (default: light) ─────────────── */
  --bg:               var(--ivory);
  --surface:          var(--parchment);
  --surface-variant:  var(--pale-cream);
  --on-bg:            var(--rich-black);
  --on-surface:       var(--pure-black);
  --on-surface-muted: var(--warm-grey);
  --primary:          var(--burgundy);
  --on-primary:       var(--parchment);
  --secondary:        var(--aged-gold);
  --outline:          var(--warm-grey);
  --divider:          rgba(107, 101, 96, 0.3);
  --shadow-1:         var(--shadow-paper-1);
  --shadow-2:         var(--shadow-paper-2);
  --shadow-3:         var(--shadow-paper-3);
}

/* ── Dark mode overrides ──────────────────────────────────────── */
.theme-dark, [data-theme="dark"] {
  --bg:               var(--deep-charcoal);
  --surface:          var(--warm-charcoal);
  --surface-variant:  var(--medium-charcoal);
  --on-bg:            var(--warm-cream);
  --on-surface:       var(--warm-cream);
  --on-surface-muted: rgba(245, 241, 232, 0.66);
  --primary:          var(--muted-gold);
  --on-primary:       var(--rich-black);
  --secondary:        var(--sage-green);
  --outline:          var(--medium-grey);
  --divider:          rgba(74, 74, 74, 0.6);
  --shadow-1:         var(--shadow-paper-dark-1);
  --shadow-2:         var(--shadow-paper-dark-2);
  --shadow-3:         var(--shadow-paper-dark-2);

  --success: var(--success-dark);
  --warning: var(--warning-dark);
  --error:   var(--error-dark);
  --info:    var(--info-dark);
}

/* ════════════════════════════════════════════════════════════════
   Semantic element styles
   Apply these with classes (.h-display, .h-headline, .t-body…)
   or override the bare html elements where appropriate.
   ──────────────────────────────────────────────────────────────── */

html, body {
  background: var(--bg);
  color: var(--on-bg);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.h-display, h1.display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--on-bg);
}

.h-headline, h2 {
  font-family: var(--font-serif);
  font-size: var(--text-headline);
  font-weight: 700;
  line-height: 1.33;
  color: var(--on-bg);
}

.h-section, .section-heading {
  font-family: var(--font-serif);
  font-size: var(--text-title);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--on-bg);
  margin: 0 0 var(--space-s) 0;
}

.t-title, h3 {
  font-family: var(--font-sans);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--on-surface);
}

.t-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.375;
  letter-spacing: 0.01em;
  color: var(--on-surface);
}

.t-body, p {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--on-surface);
}

.t-reading {
  font-family: var(--font-reading-serif);
  font-size: 18px;
  line-height: var(--leading-reading);
  color: var(--pure-black);
  letter-spacing: 0;
}

.t-label, label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: 0.01em;
  color: var(--on-surface-muted);
}

.t-small, small {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: 0.03em;
  color: var(--on-surface-muted);
}

.t-wordmark {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
}

.t-tab {
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--tracking-tab);
  text-transform: uppercase;
}

/* ── Paper-plane surface (cards) ───────────────────────────── */
.paper-surface {
  background: var(--surface);
  border-radius: var(--radius-paper);
  box-shadow: var(--shadow-1);
  padding: var(--space-m);
}

.paper-surface--raised { box-shadow: var(--shadow-2); }
.paper-surface--floating { box-shadow: var(--shadow-3); }

/* ── Numerals — use tabular for stats ──────────────────────── */
.tabular { font-variant-numeric: tabular-nums; }