/* ==========================================================================
   TimerHub Design Tokens
   Warm, editorial light theme & serene warm obsidian dark theme
   ========================================================================== */

:root {
  /* Color — surfaces */
  --color-bg: #FAF9F6;
  --color-bg-alt: #F4F2EE;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;

  /* Color — text */
  --color-ink: #23211E;
  --color-ink-soft: #4A4744;
  --color-ink-muted: #7A766F;
  --color-ink-faint: #A6A199;

  /* Color — borders */
  --color-border: #E7E3DC;
  --color-border-strong: #D8D3C9;

  /* Color — accent (warm terracotta / ember) */
  --color-accent: #B4633A;
  --color-accent-strong: #9C5330;
  --color-accent-soft: #F3E4D9;
  --color-accent-ink: #FFFFFF;

  /* Color — semantic states */
  --color-success: #4C7A5E;
  --color-success-soft: #E4EEE7;
  --color-warning: #B98A2E;
  --color-warning-soft: #F6ECD9;
  --color-danger: #B4453A;
  --color-danger-soft: #F5E2DF;

  /* Focus states (timer specific) */
  --color-ready: var(--color-ink-muted);
  --color-running: var(--color-accent);
  --color-paused: var(--color-warning);
  --color-complete: var(--color-success);

  /* Typography */
  --font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale */
  --fs-display-xl: clamp(2.6rem, 5vw + 1rem, 4.5rem);
  --fs-display-lg: clamp(2.1rem, 3.4vw + 1rem, 3.2rem);
  --fs-display-md: clamp(1.6rem, 2vw + 1rem, 2.2rem);
  --fs-display-sm: 1.4rem;
  --fs-lg: 1.15rem;
  --fs-md: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.78rem;

  /* Timer digit scale */
  --fs-timer-xl: clamp(2.1rem, 8vw, 3.4rem);
  --fs-timer-lg: clamp(1.8rem, 6vw, 2.6rem);

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.5rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* Shadow — soft, layered */
  --shadow-xs: 0 1px 2px rgba(35, 33, 30, 0.04);
  --shadow-sm: 0 2px 8px rgba(35, 33, 30, 0.05), 0 1px 2px rgba(35, 33, 30, 0.04);
  --shadow-md: 0 8px 24px rgba(35, 33, 30, 0.07), 0 2px 6px rgba(35, 33, 30, 0.05);
  --shadow-lg: 0 20px 48px rgba(35, 33, 30, 0.10), 0 4px 12px rgba(35, 33, 30, 0.06);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-med: 260ms;
  --dur-slow: 420ms;

  /* Layout */
  --max-width: 1240px;
  --max-width-narrow: 820px;
  --header-h: 84px;
  --header-h-scrolled: 68px;
}

/* Explicit Dark Theme */
[data-theme="dark"] {
  --color-bg: #141312;
  --color-bg-alt: #1C1B18;
  --color-surface: #23211E;
  --color-surface-raised: #2C2925;

  --color-ink: #F6F4EF;
  --color-ink-soft: #D6D1C6;
  --color-ink-muted: #9C968B;
  --color-ink-faint: #6B665E;

  --color-border: #36322C;
  --color-border-strong: #48433B;

  --color-accent: #E07D4A;
  --color-accent-strong: #F29563;
  --color-accent-soft: #382418;
  --color-accent-ink: #FFFFFF;

  --color-success: #5B9B74;
  --color-success-soft: #1D2D23;
  --color-warning: #D9A644;
  --color-warning-soft: #362C18;
  --color-danger: #D95B4E;
  --color-danger-soft: #381E1C;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.45);
}