/**
 * Design Tokens & Theme Custom Properties
 * Yoga & Meditation Timer
 */

:root {
  /* Obsidian / Dark Theme (Primary) */
  --color-bg: #0e0f11;
  --color-bg-subtle: #141619;
  --color-surface: #1a1c20;
  --color-surface-hover: #22242a;
  --color-surface-active: #2a2d34;
  --color-border: rgba(240, 235, 227, 0.08);
  --color-border-subtle: rgba(240, 235, 227, 0.04);
  --color-border-focus: rgba(199, 157, 108, 0.6);

  --color-text: #eeeae3;
  --color-text-secondary: #9c968c;
  --color-text-tertiary: #68635c;

  --color-accent: #c79d6c;
  --color-accent-hover: #d4ab7c;
  --color-accent-subtle: rgba(199, 157, 108, 0.12);
  --color-accent-glow: rgba(199, 157, 108, 0.35);

  --color-sage: #8f9e8b;
  --color-sage-subtle: rgba(143, 158, 139, 0.14);
  --color-clay: #d97d5d;
  --color-clay-subtle: rgba(217, 125, 93, 0.15);

  --color-ring-track: rgba(255, 255, 255, 0.05);
  --color-ring-fill: #c79d6c;
  --color-ring-glow: rgba(199, 157, 108, 0.45);

  --color-orb-base: rgba(199, 157, 108, 0.08);
  --color-orb-glow: rgba(199, 157, 108, 0.18);

  /* Typography Stacks */
  --font-serif: "Charter", "Bitstream Charter", "Iowan Old Style", "Playfair Display", "Georgia", "Cambria", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* Easing & Durations */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 450ms;
  --duration-dim: 1200ms;

  /* Layout & Spacing */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --header-height: 56px;
  --max-content-width: 960px;

  /* Safe Area Insets for Mobile */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

/* Light Theme (Washi Paper) */
[data-theme="light"] {
  --color-bg: #f6f3ec;
  --color-bg-subtle: #ede8df;
  --color-surface: #e4ddd2;
  --color-surface-hover: #dad2c5;
  --color-surface-active: #d0c7b9;
  --color-border: rgba(45, 41, 38, 0.08);
  --color-border-subtle: rgba(45, 41, 38, 0.04);
  --color-border-focus: rgba(158, 107, 64, 0.6);

  --color-text: #242220;
  --color-text-secondary: #6e6861;
  --color-text-tertiary: #968f86;

  --color-accent: #9e6b40;
  --color-accent-hover: #b07a4b;
  --color-accent-subtle: rgba(158, 107, 64, 0.12);
  --color-accent-glow: rgba(158, 107, 64, 0.25);

  --color-sage: #5f745b;
  --color-sage-subtle: rgba(95, 116, 91, 0.12);
  --color-clay: #b85b3a;
  --color-clay-subtle: rgba(184, 91, 58, 0.12);

  --color-ring-track: rgba(0, 0, 0, 0.06);
  --color-ring-fill: #9e6b40;
  --color-ring-glow: rgba(158, 107, 64, 0.35);

  --color-orb-base: rgba(158, 107, 64, 0.06);
  --color-orb-glow: rgba(158, 107, 64, 0.14);
}

/* Dim Mode (Active Session OLED Mode) */
body.is-dimmed {
  --color-bg: #000000 !important;
  --color-bg-subtle: #000000 !important;
  --color-surface: #000000 !important;
  --color-text: rgba(238, 234, 227, 0.22) !important;
  --color-text-secondary: rgba(238, 234, 227, 0.12) !important;
  --color-text-tertiary: rgba(238, 234, 227, 0.06) !important;
  --color-ring-track: rgba(255, 255, 255, 0.015) !important;
  --color-ring-fill: rgba(199, 157, 108, 0.25) !important;
  --color-ring-glow: rgba(199, 157, 108, 0.15) !important;
  --color-orb-base: rgba(199, 157, 108, 0.02) !important;
  --color-orb-glow: rgba(199, 157, 108, 0.04) !important;
  cursor: none;
}