/* ===========================================================
   Deskrune — design tokens (theme.css)
   The single source of truth for color, surface, and elevation.
   Everything visual-pass.css uses points back to these tokens.

   Loaded AFTER style.css and contrast-fixes.css, BEFORE visual-pass.css.
   2026-05-08
   =========================================================== */

:root {
  /* Surfaces */
  --ds-bg:           #FAF7F2;   /* page background — warm cream */
  --ds-surface:      #FFFFFF;   /* cards, popovers */
  --ds-surface-2:    #F2EDE3;   /* subtle alternate band */
  --ds-surface-inv:  #1A1814;   /* dark inverted surface (footer, nav-on-dark) */

  /* Text */
  --ds-ink:          #1A1814;   /* warm near-black, primary text */
  --ds-ink-soft:     #3F3B36;   /* lifted from #4A4640 — passes 8:1 AAA on bg */
  --ds-ink-faint:    #6F6A60;   /* lifted from #8A8580 — passes AA (4.5+) on bg */
  --ds-ink-on-accent:#FFFFFF;   /* text laid on the coral accent */
  --ds-ink-on-inv:   #F0E9DC;   /* text on inverted surface */

  /* Lines + outlines */
  --ds-rule:         #E8E2D7;   /* default 1px rule */
  --ds-rule-strong:  #CFC6B6;   /* hover/focus rule */
  --ds-focus-ring:   rgba(201, 97, 63, 0.55);

  /* Accent (coral, the conversion color) */
  --ds-accent:       #C9613F;   /* primary CTA fill, links */
  --ds-accent-hover: #A84F31;   /* darker for hover */
  --ds-accent-soft:  #FCE8E2;   /* tinted background for callouts */
  --ds-accent-ink:   #6E2E18;   /* deep coral for text-on-tint */

  /* Buttons */
  --ds-btn-primary-bg:      var(--ds-accent);
  --ds-btn-primary-fg:      var(--ds-ink-on-accent);
  --ds-btn-primary-bg-h:    var(--ds-accent-hover);
  --ds-btn-secondary-bg:    transparent;
  --ds-btn-secondary-fg:    var(--ds-ink);
  --ds-btn-secondary-bd:    var(--ds-rule-strong);
  --ds-btn-secondary-bg-h:  var(--ds-surface-2);

  /* Shadow ladder */
  --ds-shadow-1: 0 1px 2px rgba(26, 24, 20, 0.06);
  --ds-shadow-2: 0 8px 24px rgba(26, 24, 20, 0.08), 0 1px 3px rgba(26, 24, 20, 0.04);
  --ds-shadow-3: 0 24px 56px rgba(26, 24, 20, 0.12), 0 2px 6px rgba(26, 24, 20, 0.05);

  /* Radii */
  --ds-r-sm: 4px;
  --ds-r-md: 8px;
  --ds-r-lg: 14px;

  /* Type — system font fallback chain matching Atkinson Hyperlegible */
  --ds-font-sans: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ds-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Spacing scale (8px base, denser at small sizes) */
  --ds-s-1: 4px;
  --ds-s-2: 8px;
  --ds-s-3: 12px;
  --ds-s-4: 16px;
  --ds-s-5: 24px;
  --ds-s-6: 32px;
  --ds-s-7: 48px;
  --ds-s-8: 64px;
  --ds-s-9: 96px;

  /* Reading measure */
  --ds-measure: 65ch;
  --ds-measure-tight: 50ch;

  /* Container */
  --ds-container: 1100px;
  --ds-container-narrow: 720px;
}

:root[data-theme="dark"] {
  --ds-bg:           #0F0D0A;
  --ds-surface:      #1A1714;
  --ds-surface-2:    #221E1A;
  --ds-surface-inv:  #F0E9DC;

  --ds-ink:          #F0E9DC;
  --ds-ink-soft:     #C8C0B0;   /* lifted from #BDB6A8 → AA on bg passes */
  --ds-ink-faint:    #9A9285;   /* lifted from #7A7468 → AA on bg passes */
  /* In dark mode the accent is LIGHTER, so on-accent text must be DARK to pass AA. */
  --ds-ink-on-accent:#1A1814;
  --ds-ink-on-inv:   #1A1814;

  --ds-rule:         #2F2A24;
  --ds-rule-strong:  #4A4540;
  --ds-focus-ring:   rgba(232, 133, 106, 0.65);

  --ds-accent:       #E8856A;
  --ds-accent-hover: #F4A589;
  --ds-accent-soft:  #2A1F1A;
  --ds-accent-ink:   #FFD3C2;

  --ds-btn-primary-bg:      var(--ds-accent);
  --ds-btn-primary-fg:      #1A1814;
  --ds-btn-primary-bg-h:    var(--ds-accent-hover);
  --ds-btn-secondary-bg:    transparent;
  --ds-btn-secondary-fg:    var(--ds-ink);
  --ds-btn-secondary-bd:    var(--ds-rule-strong);
  --ds-btn-secondary-bg-h:  var(--ds-surface-2);

  --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ds-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --ds-shadow-3: 0 24px 56px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Smooth crossfade when toggling — driven by theme-toggle.js adding
   the .theme-transitioning class for ~280ms during the flip. */
html.theme-transitioning,
html.theme-transitioning * {
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease,
    fill 220ms ease,
    stroke 220ms ease !important;
}

/* Respect reduced-motion: drop the crossfade. */
@media (prefers-reduced-motion: reduce) {
  html.theme-transitioning,
  html.theme-transitioning * {
    transition: none !important;
  }
}