/* =================================================================
   FreeSum Design Tokens v2 — "Editor-grade precision × warm moments"
   Shared by index.html and settings.html
   ================================================================= */

:root {
  color-scheme: dark;

  /* Surfaces — deeper, warmer than v1 */
  --bg-0: #0a0c12;
  --bg-1: #11141d;
  --bg-2: #181c28;
  --bg-3: #232838;
  --bg-4: #2e3447;
  --bg-5: #383f55;

  /* Borders */
  --border-1: #232838;
  --border-2: #313855;
  --border-3: #455073;

  /* Text */
  --text-1: #ecedf2;
  --text-2: #a8aec0;
  --text-3: #6f7691;

  /* Accents */
  --accent: #4f8cff;
  --accent-hover: #6aa1ff;
  --accent-soft: rgba(79,140,255,.14);
  --accent-glow: rgba(79,140,255,.35);

  --warm: #f5a524;
  --warm-soft: rgba(245,165,36,.14);

  /* Semantic */
  --success: #2ecc71;
  --success-soft: rgba(46,204,113,.14);
  --warn: #f5a524;
  --warn-soft: rgba(245,165,36,.14);
  --error: #ff5a5f;
  --error-soft: rgba(255,90,95,.14);

  /* Typography */
  --font-sans: "Sarabun", "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", "Sarabun", Georgia, serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "Consolas", monospace;

  /* Radii */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.18);
  --shadow:    0 6px 16px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.20);
  --shadow-lg: 0 16px 36px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.24);
  --shadow-focus: 0 0 0 3px var(--accent-soft);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .14s var(--ease);
  --t-med:  .24s var(--ease);
  --t-slow: .42s var(--ease-out);

  /* Layout */
  --max-w: 1080px;
}

/* ---------- Light theme overrides ---------- */
html[data-theme="light"] {
  color-scheme: light;

  --bg-0: #f4f5f8;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #eef0f4;
  --bg-4: #e0e4ea;
  --bg-5: #d6dae2;

  --border-1: #e0e4ea;
  --border-2: #d0d5dd;
  --border-3: #b8bfca;

  --text-1: #1a1d24;
  --text-2: #4a525e;
  --text-3: #6a7280;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: rgba(37,99,235,.12);
  --accent-glow: rgba(37,99,235,.30);

  --warm: #d97706;
  --warm-soft: rgba(217,119,6,.12);

  --success: #16a34a;
  --success-soft: rgba(22,163,74,.10);
  --warn: #d97706;
  --warn-soft: rgba(217,119,6,.12);
  --error: #dc2626;
  --error-soft: rgba(220,38,38,.10);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-med: 0s; --t-slow: 0s; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}