/*
 * DevTrends design tokens
 *
 * Change this file to adjust the site's visual language. Component selectors belong in
 * styles.css; this file only contains reusable design decisions and theme overrides.
 */
:root {
  color-scheme: light;

  /* Typography */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-size-root: 16px;
  --font-size-xs: .75rem;
  --font-size-sm: .8125rem;
  --font-size-md: .875rem;
  --font-size-body: 1rem;
  --font-size-lg: 1.15rem;
  --line-height-tight: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Shape */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-pill: 999px;
  --border-width: 1px;

  /* Layout */
  --layout-content: 1120px;
  --layout-header: 1256px;
  --control-height: 40px;

  /* Motion */
  --duration-press: 80ms;
  --duration-fast: 160ms;
  --duration-page: 220ms;
  --duration-emphasis: 300ms;
  --ease-standard: ease;
  --ease-emphasis: cubic-bezier(.22, .61, .36, 1);
  --transition-control: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-press) var(--ease-standard);

  /* Light theme */
  --color-canvas: #f6f6f3;
  --color-surface: #fff;
  --color-surface-hover: #f4f4f0;
  --color-surface-subtle: #eeeeea;
  --color-text: #191919;
  --color-text-muted: #61615c;
  /* Secondary text must remain WCAG AA on the surface. */
  --color-text-faint: #71716b;
  --color-border: #deded8;
  --color-accent: #242424;
  --color-accent-soft: #ecece8;
  --color-accent-border: #c9c9c2;
  --color-on-accent: #fff;
  --color-positive: #18794e;
  --color-positive-soft: #e8f3ed;
  --color-positive-border: #bddccb;
  --color-brand-ink: #191919;
  --color-overlay: #111111cc;

  /* Elevation */
  --shadow-surface: 0 8px 24px #1818180a;
  --shadow-menu: 0 14px 36px #18181818;
  --shadow-floating: 0 10px 32px #1818181c;

  /* Stable semantic aliases used by components. */
  --bg: var(--color-canvas);
  --surface: var(--color-surface);
  --panel: var(--color-surface);
  --surface-hover: var(--color-surface-hover);
  --subtle: var(--color-surface-subtle);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --faint: var(--color-text-faint);
  --line: var(--color-border);
  --line-strong: var(--color-accent-border);
  --accent: var(--color-accent);
  --accent-soft: var(--color-accent-soft);
  --accent-line: var(--color-accent-border);
  --positive: var(--color-positive);
  --positive-soft: var(--color-positive-soft);
  --positive-line: var(--color-positive-border);
  --shadow: var(--shadow-surface);
}

/* Accent themes only change emphasis and interaction colors. The page stays neutral. */
:root[data-accent="blue"] {
  --color-accent: #1b57df;
  --color-accent-soft: #edf4ff;
  --color-accent-border: #d3e1ff;
}

:root[data-accent="forest"] {
  --color-accent: #0f766e;
  --color-accent-soft: #e3f4f1;
  --color-accent-border: #b7ded8;
}

:root[data-accent="violet"] {
  --color-accent: #6d28d9;
  --color-accent-soft: #f2eafe;
  --color-accent-border: #dac8f7;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #0f0f0e;
  --color-surface: #181817;
  --color-surface-hover: #20201e;
  --color-surface-subtle: #242422;
  --color-text: #f3f3ef;
  --color-text-muted: #b3b3ac;
  --color-text-faint: #96968f;
  --color-border: #373733;
  --color-accent: #edede7;
  --color-accent-soft: #2b2b28;
  --color-accent-border: #4a4a45;
  --color-on-accent: #151514;
  --color-positive: #5ac899;
  --color-positive-soft: #17352a;
  --color-positive-border: #2a5b48;
  --shadow-surface: none;
}

:root[data-theme="dark"][data-accent="blue"] {
  --color-accent: #87afff;
  --color-accent-soft: #202f4b;
  --color-accent-border: #385689;
}

:root[data-theme="dark"][data-accent="forest"] {
  --color-accent: #5eead4;
  --color-accent-soft: #143b35;
  --color-accent-border: #27675e;
}

:root[data-theme="dark"][data-accent="violet"] {
  --color-accent: #c4b5fd;
  --color-accent-soft: #33245a;
  --color-accent-border: #5b468c;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-press: .01ms;
    --duration-fast: .01ms;
    --duration-page: .01ms;
    --duration-emphasis: .01ms;
  }
}