/**
 * komainu-vigil — Design Tokens
 *
 * Shared CSS custom properties for the shrine design system.
 * Load this FIRST before any other stylesheet.
 *
 * Palette: turquoise / amber / red on dark (dusk shrine aesthetic)
 *
 * Usage:
 *   <link rel="stylesheet" href="/css/design-tokens.css">
 *   <link rel="stylesheet" href="/css/components.css">
 *   <link rel="stylesheet" href="/css/animations.css">
 */

/* ═══════════════════════════════════════════════
   Colors — Core palette
   ═══════════════════════════════════════════════ */

:root {
  /* Primary — turquoise (guardian's eyes) */
  --color-primary: #4ecdc4;
  --color-primary-light: #a8e6cf;
  --color-primary-dark: #44b3ab;
  --color-primary-glow: rgba(78, 205, 196, 0.15);
  --color-primary-glow-strong: rgba(78, 205, 196, 0.3);

  /* Accent — amber (lantern glow) */
  --color-accent: #ffb74d;
  --color-accent-light: #ffd89b;
  --color-accent-dark: #e8a87c;
  --color-accent-glow: rgba(255, 183, 77, 0.12);
  --color-accent-glow-strong: rgba(255, 183, 77, 0.25);

  /* Danger — red (alert / error) */
  --color-danger: #ff6b6b;
  --color-danger-light: #ff9b9b;
  --color-danger-dark: #e05555;
  --color-danger-glow: rgba(255, 107, 107, 0.15);
  --color-danger-glow-strong: rgba(255, 107, 107, 0.3);

  /* Surface — backgrounds */
  --color-bg: #1a1a2e;
  --color-bg-gradient-1: #1a1a2e;
  --color-bg-gradient-2: #16213e;
  --color-bg-gradient-3: #0f3460;
  --color-surface: rgba(255, 255, 255, 0.03);
  --color-surface-hover: rgba(255, 255, 255, 0.05);

  /* Text */
  --color-text: #e8e8e8;
  --color-text-secondary: #aaa;
  --color-text-muted: #888;
  --color-text-faint: #666;

  /* Borders */
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-subtle: rgba(78, 205, 196, 0.1);
  --color-border-primary: rgba(78, 205, 196, 0.15);
  --color-border-accent: rgba(255, 183, 77, 0.15);
  --color-border-focus: rgba(78, 205, 196, 0.5);

  /* Status */
  --color-status-pass: #4ecdc4;
  --color-status-warn: #ffb74d;
  --color-status-fail: #ff6b6b;
  --color-status-unknown: #888;
}

/* ═══════════════════════════════════════════════
   Typography
   ═══════════════════════════════════════════════ */

:root {
  /* Font families */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: Georgia, 'Noto Serif JP', 'Hiragino Mincho Pro', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  /* Font sizes — modular scale (1.25 ratio, base 14px) */
  --text-xs: 0.71rem;    /* ~10px — timestamps, metadata */
  --text-sm: 0.86rem;    /* ~12px — labels, chips */
  --text-base: 1rem;     /* 14px — body */
  --text-md: 1.13rem;    /* ~16px — body emphasis */
  --text-lg: 1.4rem;     /* ~20px — section headers */
  --text-xl: 1.75rem;    /* ~24px — card titles */
  --text-2xl: 2.2rem;    /* ~30px — page subtitles */
  --text-3xl: 2.75rem;   /* ~38px — page titles */
  --text-4xl: 3.4rem;    /* ~48px — hero (h1 on home) */

  /* Font weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;

  /* Line heights */
  --leading-tight: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
  --leading-loose: 2.2;

  /* Letter spacing */
  --tracking-wide: 0.15rem;
  --text-h1-tracking: 0.5rem;
}

/* ═══════════════════════════════════════════════
   Spacing — 0.5rem (8px) base unit
   ═══════════════════════════════════════════════ */

:root {
  --space-1: 0.25rem;   /* 4px  — tight gaps */
  --space-2: 0.5rem;    /* 8px  — small gaps */
  --space-3: 0.75rem;   /* 12px — content padding small */
  --space-4: 1rem;      /* 16px — standard gap */
  --space-5: 1.25rem;   /* 20px — card padding */
  --space-6: 1.5rem;    /* 24px — section gap */
  --space-8: 2rem;      /* 32px — large gap */
  --space-10: 2.5rem;   /* 40px — major sections */
  --space-12: 3rem;     /* 48px — hero spacing */
  --space-16: 4rem;     /* 64px — empty states */
}

/* ═══════════════════════════════════════════════
   Borders & Shadows
   ═══════════════════════════════════════════════ */

:root {
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 50%;

  /* Border widths */
  --border-1: 1px;
  --border-2: 1.5px;
  --border-3: 3px;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 0 20px rgba(78, 205, 196, 0.1);
  --shadow-glow-primary: 0 0 20px rgba(78, 205, 196, 0.15);
  --shadow-glow-accent: 0 0 20px rgba(255, 183, 77, 0.15);
  --shadow-inset-dark: inset 0 0 30px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════
   Layout
   ═══════════════════════════════════════════════ */

:root {
  /* Container widths */
  --container-narrow: 500px;
  --container-md: 600px;
  --container-wide: 800px;
  --container-max: 1100px;

  /* Page padding */
  --page-padding: 2rem;
  --page-padding-mobile: 1.5rem;

  /* Grid gaps */
  --grid-gap-sm: 1rem;
  --grid-gap: 1.5rem;
  --grid-gap-lg: 2rem;
}

/* ═══════════════════════════════════════════════
   Breakpoints
   ═══════════════════════════════════════════════ */

/* Used in components.css:
   -- mobile-first
   -- sm:  640px  (phablet)
   -- md:  768px  (tablet)
   -- lg:  1024px (desktop)
   -- xl:  1280px (wide)
*/

/* ═══════════════════════════════════════════════
   Transitions
   ═══════════════════════════════════════════════ */

:root {
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  --duration-slower: 1s;

  --transition-color: color var(--duration-normal) var(--ease-out);
  --transition-opacity: opacity var(--duration-normal) var(--ease-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-all: all var(--duration-normal) var(--ease-out);
}

/* ═══════════════════════════════════════════════
   Seasonal palette overrides
   Set body[data-season="..."] to activate.
   ═══════════════════════════════════════════════ */

/* Spring — cherry blossoms */
[data-season="spring"] {
  --color-primary: #ffb7c5;
  --color-primary-glow: rgba(255, 183, 197, 0.15);
  --color-primary-glow-strong: rgba(255, 183, 197, 0.3);
  --color-bg-gradient-2: #2d1b3d;
  --color-bg-gradient-3: #1b3a4a;
}

/* Summer — fireflies */
[data-season="summer"] {
  --color-primary: #a8e6cf;
  --color-primary-glow: rgba(168, 230, 207, 0.15);
  --color-primary-glow-strong: rgba(168, 230, 207, 0.3);
  --color-bg: #0d1117;
  --color-bg-gradient-1: #0d1117;
  --color-bg-gradient-2: #161b22;
  --color-bg-gradient-3: #1a2332;
}

/* Autumn — maple leaves */
[data-season="autumn"] {
  --color-primary: #e8a87c;
  --color-primary-glow: rgba(232, 168, 124, 0.15);
  --color-primary-glow-strong: rgba(232, 168, 124, 0.3);
  --color-bg-gradient-2: #2d1f1f;
  --color-bg-gradient-3: #3d2b1f;
}

/* Winter — frost */
[data-season="winter"] {
  --color-primary: #a8d8ea;
  --color-primary-glow: rgba(168, 216, 234, 0.15);
  --color-primary-glow-strong: rgba(168, 216, 234, 0.3);
  --color-bg: #0f0f23;
  --color-bg-gradient-1: #0f0f23;
  --color-bg-gradient-2: #1a1a3e;
  --color-bg-gradient-3: #16213e;
}