/* ===================================================================
   THEMES.CSS — Design tokens (color, type, spacing, elevation)
   Palette: Ink Navy / Paper White / Emerald / Antique Gold
=================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: local('Fraunces');
}

:root {
  /* ---- Brand palette ---- */
  --ink-900: #12162a;
  --ink-800: #1b2140;
  --ink-700: #262d52;
  --paper-0: #fbfaf7;
  --paper-50: #f4f2ec;
  --paper-100: #ece9e0;

  --emerald-600: #1f7a5c;
  --emerald-500: #23916d;
  --emerald-100: #dcf0e7;

  --gold-500: #c9a24b;
  --gold-600: #a9843a;
  --gold-100: #f6ecd3;

  --danger-500: #c1483f;
  --danger-100: #f8e2df;
  --info-500: #3b6ea5;

  /* ---- Semantic tokens (light theme default) ---- */
  --bg-app: var(--paper-50);
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-sunken: var(--paper-100);
  --bg-hover: rgba(31, 122, 92, 0.07);
  --bg-active: rgba(31, 122, 92, 0.12);
  --bg-glass: rgba(255, 255, 255, 0.66);

  --text-primary: var(--ink-900);
  --text-secondary: #52597a;
  --text-tertiary: #8890ab;
  --text-inverse: #fbfaf7;
  --text-on-accent: #ffffff;

  --border-subtle: rgba(18, 22, 42, 0.08);
  --border-default: rgba(18, 22, 42, 0.14);
  --border-strong: rgba(18, 22, 42, 0.24);

  --accent: var(--emerald-600);
  --accent-hover: var(--emerald-500);
  --accent-soft: var(--emerald-100);
  --gold: var(--gold-500);
  --gold-soft: var(--gold-100);

  --success: var(--emerald-600);
  --danger: var(--danger-500);
  --danger-soft: var(--danger-100);
  --info: var(--info-500);

  --shadow-sm: 0 1px 2px rgba(18, 22, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(18, 22, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(18, 22, 42, 0.12);
  --shadow-page: 0 2px 8px rgba(18, 22, 42, 0.10), 0 20px 48px rgba(18, 22, 42, 0.14);
  --shadow-focus: 0 0 0 3px rgba(31, 122, 92, 0.28);

  /* ---- Type ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.1rem;

  /* ---- Radius / spacing scale ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --transition-fast: 140ms cubic-bezier(.4,0,.2,1);
  --transition-base: 220ms cubic-bezier(.4,0,.2,1);

  --accent-color-user: var(--emerald-600); /* overridden by settings */
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --bg-app: #0d1020;
  --bg-surface: #151a30;
  --bg-surface-raised: #1a2038;
  --bg-sunken: #0a0c18;
  --bg-hover: rgba(35, 145, 109, 0.14);
  --bg-active: rgba(35, 145, 109, 0.22);
  --bg-glass: rgba(21, 26, 48, 0.7);

  --text-primary: #f2f1ec;
  --text-secondary: #b6bad3;
  --text-tertiary: #7a80a0;
  --text-inverse: #12162a;

  --border-subtle: rgba(242, 241, 236, 0.08);
  --border-default: rgba(242, 241, 236, 0.14);
  --border-strong: rgba(242, 241, 236, 0.26);

  --accent: var(--emerald-500);
  --accent-hover: #2ba57c;
  --accent-soft: rgba(35, 145, 109, 0.18);
  --gold-soft: rgba(201, 162, 75, 0.16);

  --danger-soft: rgba(193, 72, 63, 0.18);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.44);
  --shadow-page: 0 2px 8px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
  --shadow-focus: 0 0 0 3px rgba(35, 145, 109, 0.35);
}

/* ---- High contrast accessibility mode ---- */
[data-contrast="high"] {
  --border-subtle: var(--border-strong);
  --text-secondary: var(--text-primary);
  --shadow-focus: 0 0 0 4px #000, 0 0 0 6px #fff;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after {
  animation: none !important;
  transition: none !important;
}