/**
 * Touge Atlas - Design Tokens
 * Brand Book v1.0 aligned. Link first: <link rel="stylesheet" href="/styles/tokens.css?v=1">
 *
 * Breakpoints: 480px, 768px, 960px, 1024px, 1280px
 */

:root {
  /* Color - neutral zinc ground so the red accent is the only warmth */
  --bg-primary: #0A0A0A;
  --bg-secondary: #18181B;
  --bg-tertiary: #27272A;

  --text-primary: #FAFAF9;
  --text-secondary: #A1A1AA;
  --text-tertiary: #71717A;
  --text-on-accent: #FFFFFF;
  --text-on-light: #0A0A0A;
  --status-success: #22C55E;
  --status-error: #EF4444;
  --community-primary: #5865F2;
  --community-hover: #4752C4;
  --print-background: #FFFFFF;
  --print-text: #000000;
  --print-muted: #555555;
  --print-border: #DDDDDD;

  /* Red accent - monochromatic depth scale */
  --accent-color: #DC2626;
  --accent-secondary: #B91C1C;
  --accent-text: #EF4444; /* WCAG AA on #18181B = 4.7:1 */
  --accent-glow: rgba(220, 38, 38, 0.25);
  --accent-highlight: #FCA5A5; /* light tint for subtle badges/labels */

  --border-color: #27272A;
  --border-soft: rgba(250, 250, 249, 0.07);
  --border-strong: rgba(250, 250, 249, 0.13);

  --surface-1: rgba(16, 16, 18, 0.96);
  --surface-2: rgba(24, 24, 27, 0.96);
  --surface-3: rgba(39, 39, 42, 0.96);
  --surface-glass: rgba(10, 10, 10, 0.88);
  --surface-hover: rgba(250, 250, 249, 0.06);
  --surface-active: rgba(250, 250, 249, 0.10);
  --surface-light: #FFFFFF;
  --text-overlay-muted: rgba(250, 250, 249, 0.60);
  --accent-soft: rgba(220, 38, 38, 0.12);
  --accent-medium: rgba(220, 38, 38, 0.26);
  --overlay-soft: rgba(0, 0, 0, 0.45);
  --overlay-medium: rgba(0, 0, 0, 0.72);
  --overlay-strong: rgba(0, 0, 0, 0.92);
  --shadow-elevated: 0 30px 70px rgba(0, 0, 0, 0.5);
  --shadow-nav: 0 22px 48px rgba(0, 0, 0, 0.55);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-kicker: "Orbitron", "Inter", system-ui, sans-serif;

  /* Type scale (1.25 ratio) */
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.953125rem;
  --text-3xl: 2.44140625rem;

  /* Spacing (8px base) */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Layout */
  --content-max: 1440px;
  --content-gutter: clamp(24px, 5vw, 40px);
  --nav-height: 104px;
  --nav-height-mobile: 84px;

  /* Legacy aliases */
  --spacing-xs: var(--space-xs);
  --spacing-sm: var(--space-sm);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-lg);
  --spacing-xl: var(--space-xl);
  --spacing-2xl: var(--space-2xl);
  --spacing-3xl: var(--space-3xl);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Motion */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-instant: 0.08s;
  --duration-fast: 0.15s;
  --duration-base: 0.22s;
  --duration-slow: 0.32s;
  --dur-instant: var(--duration-instant);
  --dur-fast: var(--duration-fast);
  --dur-base: var(--duration-base);
  --dur-slow: var(--duration-slow);

  /* Legacy names used by existing page-specific styles */
  --red: var(--accent-color);
  --red-hot: var(--accent-secondary);
  --red-glow: var(--accent-glow);
  --bg: var(--bg-primary);
  --bg-1: var(--bg-secondary);
  --bg-2: var(--surface-2);
  --bg-3: var(--bg-tertiary);
  --fg-1: var(--text-primary);
  --fg-2: var(--text-secondary);
  --fg-3: var(--text-tertiary);
  --border: var(--border-soft);
  --border-hi: var(--border-strong);
  --glass-bg: var(--surface-glass);
}

/* Japanese font override - Inter leads for Latin, Noto Sans JP covers JP glyphs */
html[lang="ja"] {
  --font-sans: "Inter", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-display: "Inter", "Noto Sans JP", system-ui, sans-serif;
}

/* Base heading weights */
h1 { font-weight: 800; }
h2 { font-weight: 800; }
h3 { font-weight: 600; }