/* ═══════════════ WikiEtymology design tokens ═══════════════
   Palette from the "WikiEtymology Homepage" design (November 2026): warm paper, deep
   navy ink, copper accent, sage. Variable names are kept from the earlier theme so every
   component picks up the new look; comments give the new role.
   Text colors are checked for WCAG AA (4.5:1) on --marble and --paper. */
:root {
  /* Surfaces */
  --marble:      #F7F4ED;   /* paper: page background */
  --paper:       #FFFDF8;   /* surface: cards, panels */
  --stone:       #EDE7DB;   /* paper-deep: footer, fills */
  --stone-soft:  #F2EDE3;

  /* Text */
  --ink:         #13252D;   /* headings and strong text (15:1) */
  --body:        #1F3239;   /* body text (12:1) */
  --muted:       #56646A;   /* secondary text (5.9:1) */
  --faint:       #5B6870;   /* labels; darker than the mockup's #7A8589 so it passes AA on every surface */

  --border:      #D5CEC0;
  --border-soft: #E4DED2;

  /* Brand: COPPER (links, emphasis, eyebrows) */
  --brand:       #9A4C27;   /* copper, slightly deeper than the mockup's #A85932 so it passes AA on paper-deep */
  --brand-deep:  #8A4526;
  --brand-mid:   #C06F48;
  --brand-tint:  #EAD5C8;

  /* Accent: NAVY (answer card rule, badges, chips) */
  --accent:      #173D4B;
  --accent-deep: #0D2E39;
  --accent-mid:  #4F6F79;
  --accent-tint: #E1E9EA;

  /* Rule: soft copper (timeline dots, origin chain, examples) */
  --gold:        #C98A62;
  --gold-deep:   #A85932;
  --gold-tint:   #F4E8DE;

  /* Quiet: SAGE */
  --camel:       #7D8F7B;
  --camel-deep:  #4F6150;   /* readable as small text (6:1) */
  --camel-tint:  #E5EAE2;

  --success:     #4F6150;
  --danger:      #A3361F;
  --warning:     #A85932;

  --serif: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  clamp(2.25rem, 5vw, 3.25rem);

  --lh-tight:   1.1;
  --lh-snug:    1.35;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --ls-tight: -0.02em;
  --ls-wide:  0.08em;
  --ls-wider: 0.12em;

  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;

  /* Sharp, editorial edges */
  --r-sm: 2px;  --r: 4px;  --r-lg: 6px;  --r-full: 999px;

  --sh-xs: 0 1px 2px rgba(19,37,45,.05);
  --sh-sm: 0 10px 35px rgba(26,45,49,.08);
  --sh-md: 0 18px 50px rgba(30,37,38,.10);

  --container:    1180px;
  --container-sm: 720px;
  --container-xs: 560px;
  --article:      680px;
  --rail:         300px;
  --header-h:     4.75rem;

  --ease:    cubic-bezier(.4,0,.2,1);
  --dur-sm:  150ms;
  --dur-md:  250ms;

  --z-sticky: 100;
  --z-modal:  1000;
  --z-toast:  2000;

  /* Header and footer: light paper bar with a hairline, as in the design */
  --header-bg:     rgba(247,244,237,.94);
  --header-fg:     #13252D;
  --header-muted:  #56646A;
  --header-hover:  rgba(19,37,45,.06);
  --header-accent: #9A4C27;

  /* Navy bands (Word of the Day card, "How a word travels", calls to action) */
  --band-bg:     #173D4B;
  --band-fg:     #F7F4ED;
  --band-muted:  rgba(247,244,237,.74);
  --band-line:   rgba(247,244,237,.25);
  --band-accent: #E19267;   /* light copper: 4.6:1 on navy */

  --icon-sun-display:  block;
  --icon-moon-display: none;
}

[data-theme="dark"] {
  --marble:      #101A1E;
  --paper:       #17252A;
  --stone:       #152328;
  --stone-soft:  #142126;

  --ink:         #EDF1ED;
  --body:        #D6DEDB;
  --muted:       #B5C0BD;
  --faint:       #8FA09C;

  --border:      #31454A;
  --border-soft: #23363B;

  --brand:       #E19267;
  --brand-deep:  #EBA882;
  --brand-mid:   #C97A52;
  --brand-tint:  #4D3027;

  --accent:      #A9CBCC;
  --accent-deep: #D6E6E6;
  --accent-mid:  #6F9599;
  --accent-tint: #1B3036;

  --gold:        #E19267;
  --gold-deep:   #EBA882;
  --gold-tint:   #3A2A22;

  --camel:       #A8B7A2;
  --camel-deep:  #C1CEB9;
  --camel-tint:  #24302A;

  --success:     #A8B7A2;
  --danger:      #F08A72;
  --warning:     #E19267;

  --sh-xs: 0 1px 2px rgba(0,0,0,.3);
  --sh-sm: 0 10px 35px rgba(0,0,0,.24);
  --sh-md: 0 18px 50px rgba(0,0,0,.30);

  --header-bg:     rgba(16,26,30,.92);
  --header-fg:     #EDF1ED;
  --header-muted:  #B5C0BD;
  --header-hover:  rgba(237,241,237,.08);
  --header-accent: #E19267;

  --band-bg:     #0D2E39;
  --band-fg:     #EDF1ED;
  --band-muted:  rgba(237,241,237,.74);
  --band-line:   rgba(237,241,237,.22);
  --band-accent: #E19267;

  --icon-sun-display:  none;
  --icon-moon-display: block;
}