/*
 * Design tokens — Premium Tech-Editorial v1.2.0
 *
 * Two-language palette: COLD-METHOD (data, Tool Card, Live Log, mono numbers)
 * + WARM-EDITORIAL (long-form reading, hero, author bios).
 *
 * Anchored on warm-paper #FCFCFA bg + ink-navy #0F141E text + tech-indigo #4338CA accent.
 *
 * Hairline borders are 0.5px globally. Shadows are paired (tight + soft) for premium depth.
 *
 * Change tokens here, not in component files.
 */

:root {
  /* === Editorial neutrals === */
  --dm-paper:        #FCFCFA;          /* warm paper, primary bg */
  --dm-paper-deep:   #F5F5F0;          /* card bg with depth */
  --dm-paper-cool:   #F9FAFB;          /* cool fallback for forms */
  --dm-ink:          #0F141E;          /* primary text, headlines */
  --dm-ink-soft:     #1F2937;          /* secondary text, body */
  --dm-slate:        #6B7280;          /* meta / captions */
  --dm-slate-soft:   #9CA3AF;          /* timestamps / supporting */
  --dm-hairline:     #E5E7EB;          /* 0.5–1px borders */
  --dm-hairline-soft:#F3F4F6;          /* dividers / inner separators */

  /* === Brand accents === */
  --dm-indigo:       #4338CA;          /* primary accent, CTA, links */
  --dm-indigo-deep:  #3730A3;          /* hover state for links */
  --dm-indigo-soft:  #E0E7FF;          /* tinted accent backgrounds */
  --dm-indigo-glow:  rgba(67, 56, 202, 0.15); /* hover glow */

  /* === Semantic colors === */
  --dm-mint:         #10B981;          /* pros / verified / live */
  --dm-mint-soft:    #D1FAE5;          /* mint backgrounds */
  --dm-rose:         #E11D48;          /* cons / warning */
  --dm-rose-soft:    #FFE4E6;          /* rose backgrounds */
  --dm-amber:        #F59E0B;          /* attention / promo */

  /* === Legacy aliases (keep until full migration) === */
  --dm-paper-bg:     var(--dm-paper);
  --dm-ink-subtle:   var(--dm-slate);
  --dm-ink-lighter:  var(--dm-slate-soft);
  --dm-gold:         var(--dm-amber);
  --dm-cream:        var(--dm-paper-deep);

  /* === Type families — self-hosted variable fonts === */
  --dm-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --dm-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --dm-mono:  'JetBrains Mono', 'SF Mono', 'Cascadia Mono', 'Fira Code', monospace;

  /* === Type scale — 17px base === */
  --dm-fs-h1:    36px;   /* serif 580, opsz 36, ls -0.02em */
  --dm-fs-h2:    26px;   /* serif 540, opsz 26, ls -0.01em */
  --dm-fs-h3:    20px;   /* serif 540 */
  --dm-fs-h4:    17px;   /* sans 600, all caps for sub-section labels */
  --dm-fs-body:  17px;   /* sans 425, lh 1.65 */
  --dm-fs-small: 14px;   /* sans 425, meta */
  --dm-fs-meta:  14px;   /* alias */
  --dm-fs-cap:   12px;   /* mono for data captions */
  --dm-fs-micro: 11px;   /* eyebrows, all-caps tracking */
  --dm-fs-nano:  10px;   /* legal / disclosure micro */

  /* === Line-height + letter-spacing === */
  --dm-lh-display:  1.15;
  --dm-lh-tight:    1.3;
  --dm-lh-snug:     1.4;
  --dm-lh-prose:    1.65;
  --dm-lh-body:     var(--dm-lh-prose); /* legacy alias */
  --dm-lh-relaxed:  1.7;

  --dm-ls-display:  -0.02em;
  --dm-ls-tight:    -0.01em;
  --dm-ls-normal:   0;
  --dm-ls-wide:     0.05em;
  --dm-ls-widest:   0.08em;

  /* === Spacing === */
  --dm-s0: 4px;
  --dm-s1: 8px;
  --dm-s2: 16px;
  --dm-s3: 24px;
  --dm-s4: 32px;
  --dm-s5: 48px;
  --dm-s6: 64px;
  --dm-s7: 80px;
  --dm-s8: 96px;
  --dm-s9: 128px;

  /* === Radius === */
  --dm-r-xs:   3px;
  --dm-r-sm:   6px;
  --dm-r-md:   8px;
  --dm-r-lg:   10px;
  --dm-r-xl:   12px;
  --dm-r-pill: 100px;

  /* === Widths === */
  --dm-w-container: 1280px;
  --dm-w-wide:      1120px;
  --dm-w-prose:     720px;
  --dm-w-article:   var(--dm-w-prose); /* legacy alias */
  --dm-w-narrow:    560px;

  /* === Shadows — Astra-calm: very light, almost-none-by-default ===
   * Premium pattern: shadows are an accent, not a foundation.
   * Hairlines do most of the depth work; shadows kick in on hover/elevation.
   */
  --dm-shadow-xs: 0 1px 2px rgba(15, 20, 30, 0.025);
  --dm-shadow-sm: 0 1px 2px rgba(15, 20, 30, 0.03);
  --dm-shadow-md: 0 1px 1px rgba(15, 20, 30, 0.025), 0 2px 8px rgba(15, 20, 30, 0.035);
  --dm-shadow-lg: 0 1px 2px rgba(15, 20, 30, 0.04), 0 6px 20px rgba(15, 20, 30, 0.05);
  --dm-shadow-xl: 0 2px 4px rgba(15, 20, 30, 0.05), 0 12px 36px rgba(15, 20, 30, 0.08);
  --dm-shadow-glow: 0 0 0 1px var(--dm-indigo) inset, 0 0 18px var(--dm-indigo-glow);

  /* === Borders === */
  --dm-border-hairline: 0.5px solid var(--dm-hairline);
  --dm-border-soft:     0.5px solid var(--dm-hairline-soft);
  --dm-border-strong:   1px solid var(--dm-slate-soft);
  --dm-border-accent:   3px solid var(--dm-indigo); /* QV left edge */

  /* === Motion === */
  --dm-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dm-dur-instant: 80ms;
  --dm-dur-fast:    120ms;
  --dm-dur-base:    200ms;
  --dm-dur-slow:    360ms;

  /* === Z-index === */
  --dm-z-progress: 100;   /* reading progress bar */
  --dm-z-header:   90;    /* sticky header */
  --dm-z-overlay:  500;   /* modal / drawer backdrop */
  --dm-z-modal:    501;
  --dm-z-toast:    600;

  /* === Animatable custom properties === */
  /* (used in component CSS for color-mix glow + confidence bar) */
}

/* Scoped registered properties for animation. Not all browsers support, so a
 * graceful fallback is built into every component that uses these. */
@supports (background: paint(something)) {
  @property --dm-confidence {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 92%;
  }
}

/* Defensive prefers-color-scheme — full dark mode arrives in v1.4.0 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light dark;
    /* Body still readable in dark UA chrome — actual dark mode tokens TBD */
  }
}

/* prefers-reduced-motion — respect system preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}