/* ==========================================================================
   kAsteria — Design Tokens
   Single source of truth for color, type and spacing. Every page in the
   site (landing + app pages) loads this file first so the whole product
   shares one visual language: editorial black/offwhite, signal-gold accent.
   ========================================================================== */

/* --- Light Mode ("Offwhite") --- */
:root {
  --surface: #faf7f0;
  --surface-dim: #e6e2dc;
  --surface-bright: #f8f4ea;

  --on-surface: #0e0e0c;
  --on-surface-variant: #47464b;

  --primary: #000000;
  --on-primary: #f8f4ea;

  --secondary: #3b5088;
  --gold-accent: #a97e1f;
  --danger: #a4342a;
  --success: #3f6b4a;

  --outline: #78767b;
  --outline-variant: #d8d5cf;

  --background: #faf7f0;
  --canvas-bg: #faf7f0;

  --grid-line: rgba(0, 0, 0, 0.08);
  --card-border: rgba(0, 0, 0, 0.1);
  --card-bg: rgba(248, 244, 234, 0.72);
  --sidebar-bg: rgba(250, 247, 240, 0.9);

  --toggle-bg: rgba(0, 0, 0, 0.06);
  --toggle-hover: rgba(0, 0, 0, 0.12);
  --toggle-icon: var(--on-surface);

  --shadow-soft: 0 2px 10px rgba(20, 18, 12, 0.06);
  --shadow-elevated: 0 18px 40px rgba(20, 18, 12, 0.12);

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

  --max-width: 1280px;
  --margin-desktop: 64px;
  --margin-mobile: 24px;
  --gutter: 32px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --theme-transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Motion / accessibility overrides — toggled by Settings, read by every page */
  --motion-scale: 1;
  --text-scale: 1;
  --sidebar-w: 268px;
}

/* --- Dark Mode ("Deep Space") --- */
[data-theme="dark"] {
  --surface: #050506;
  --surface-dim: #050506;
  --surface-bright: #131315;

  --on-surface: #f2efe8;
  --on-surface-variant: #a8a6ad;

  --primary: #f2ede1;
  --on-primary: #000000;

  --secondary: #a4b9fe;
  --gold-accent: #e8b94a;
  --danger: #e8897c;
  --success: #7fcf98;

  --outline: #8b8892;
  --outline-variant: #302f33;

  --background: #050506;
  --canvas-bg: #050506;

  --grid-line: rgba(255, 255, 255, 0.06);
  --card-border: rgba(255, 255, 255, 0.12);
  --card-bg: rgba(19, 19, 21, 0.65);
  --sidebar-bg: rgba(8, 8, 9, 0.86);

  --toggle-bg: rgba(255, 255, 255, 0.08);
  --toggle-hover: rgba(255, 255, 255, 0.16);
  --toggle-icon: var(--on-surface);

  --shadow-soft: 0 2px 14px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* --- Accessibility: High Contrast (Settings > Universal Access) --- */
[data-contrast="high"] {
  --outline-variant: var(--outline);
  --card-border: var(--outline);
  --on-surface-variant: var(--on-surface);
}
[data-contrast="high"][data-theme="dark"] { --gold-accent: #ffd166; }
[data-contrast="high"]:not([data-theme="dark"]) { --gold-accent: #7a5a10; }

/* --- Accessibility: Reduced Transparency --- */
[data-transparency="reduced"] {
  --card-bg: var(--surface-bright);
  --sidebar-bg: var(--surface);
}

/* --- Accessibility: Motion --- */
[data-motion="reduced"] { --motion-scale: 0; }
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* --- Accessibility: Larger Text --- */
[data-text="large"] { --text-scale: 1.18; }
html { font-size: calc(16px * var(--text-scale, 1)); }

/* --- Density: Compact layout (Settings > Interface) --- */
[data-density="compact"] {
  --space-3: 18px; --space-4: 24px; --space-5: 30px; --space-6: 36px; --space-7: 42px; --space-8: 48px;
  --sidebar-w: 232px;
}