/* ====================================================
   🎨 Gurutai Brand Shared Design Tokens (tokens.css)
   Light & Dark Theme CSS Custom Properties
   ==================================================== */

/* Light Theme Variables (Default) */
:root,
[data-theme="light"] {
  color-scheme: light;
  --font-english: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-japanese: "LINE Seed JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;

  /* 不透明度スケール (Opacity Scale) */
  --opacity-subtle: 8%;
  --opacity-surface: 15%;
  --opacity-border: 25%;
  --opacity-overlay: 75%;

  /* ベースカラー定義 (Hex値は定義時のみ) */
  --primary-color: #c8511b;
  /* Bright Gurutai tone orange (WCAG AA 4.9:1) */
  --primary-hover: #a63c0e;
  /* Darker Gurutai Orange (WCAG AA 6.6:1) */
  --primary-light: color-mix(in srgb, var(--primary-color) var(--opacity-subtle), transparent);
  --on-primary-color: #ffffff;

  --logo-color: #ac2424;
  /* Gurutai Official Red (WCAG AA 6.93:1) */
  --logo-badge-bg: color-mix(in srgb, var(--logo-color) var(--opacity-subtle), transparent);
  --logo-badge-color: #ac2424;
  --logo-badge-border: color-mix(in srgb, var(--logo-color) var(--opacity-border), transparent);

  --bg-color: #ffffff;
  /* Dominant White */
  --bg-secondary: #f8fafc;
  /* Hero & Panel Background */
  --bg-card: #ffffff;
  /* Card Surface */
  --bg-card-hover: #f1f5f9;
  /* Card Hover */

  --text-main: #0f172a;
  /* Dark Slate Body Text */
  --text-muted: #64748b;
  /* Muted Text */
  --text-link: #c8511b;
  /* Clickable Text */
  --text-link-hover: #a63c0e;

  /* タクソノミー・役割別カラー (WCAG 2.1 AA 準拠) */
  --meta-area-color: #1e40af;
  --meta-area-bg: color-mix(in srgb, var(--meta-area-color) var(--opacity-subtle), transparent);
  --meta-area-border: color-mix(in srgb, var(--meta-area-color) var(--opacity-border), transparent);

  --meta-category-color: #065f46;
  --meta-category-bg: color-mix(in srgb, var(--meta-category-color) var(--opacity-subtle), transparent);
  --meta-category-border: color-mix(in srgb, var(--meta-category-color) var(--opacity-border), transparent);

  --meta-tag-color: #475569;
  --meta-tag-bg: color-mix(in srgb, var(--meta-tag-color) var(--opacity-subtle), transparent);
  --meta-tag-border: color-mix(in srgb, var(--meta-tag-color) var(--opacity-border), transparent);
  --meta-tag-active-bg: #cbd5e1;
  --meta-tag-active-color: #0f172a;
  --meta-tag-active-border: #64748b;

  --border-color: #e2e8f0;
  --header-bg: color-mix(in srgb, var(--bg-color) 90%, transparent);

  /* 🔤 Font Size Design Tokens (8-Scale System) */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.8rem;
  --font-size-hero: 2.5rem;

  /* 📐 Spacing Design Tokens (4px / 8px Grid System) */
  --space-2xs: 0.15rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-section: 3rem;

  /* 📐 Layout Framework Tokens */
  --container-wide: 1200px;
  --container-narrow: 900px;
  --container-links: 520px;

  --annotation-gap: 0.2rem;
  --annotation-pull: -0.3rem;

  --radius-sm: 8px;
  --radius-xl: 14px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --shadow-primary: 0 6px 20px color-mix(in srgb, var(--primary-color) 35%, transparent);
  --shadow-primary-hover: 0 8px 24px color-mix(in srgb, var(--primary-color) 50%, transparent);
  --shadow-overlay: 0 20px 45px color-mix(in srgb, var(--text-main) 25%, transparent);
  --shadow-dropdown: 0 14px 34px -4px color-mix(in srgb, var(--text-main) 18%, transparent);
  --shadow-focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);

  /* 🔤 Typographic Tokens (Letter Spacing & Line Height) */
  --tracking-tight: -0.05em;
  --tracking-normal: 0.03em;
  --tracking-wide: 0.05em;

  --leading-none: 1;
  --leading-tight: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* 📑 Z-Index Layer Tokens */
  --z-raised: 2;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-bottom-nav: 500;
  --z-modal: 1000;
  --z-toast: 2000;

  --transition-theme: background-color 0.3s ease, color 0.3s ease;
  --transition-fast: 0.15s cubic-bezier(0, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0, 0, 0.2, 1);
  --transition-quick-out: 0.1s ease-in;

  --opacity-disabled: 0.4;
  --opacity-muted: 0.65;

  --social-instagram-color: #e1306c;
  --social-google-color: #4285F4;

  /* システムカラー */
  --color-do: #16a34a;
  --color-do-bg: color-mix(in srgb, var(--color-do) var(--opacity-subtle), transparent);
  --color-dont: #dc2626;
  --color-dont-bg: color-mix(in srgb, var(--color-dont) var(--opacity-subtle), transparent);
  --color-warning: #f59e0b;
  --color-warning-bg: color-mix(in srgb, var(--color-warning) 10%, transparent);
  --color-warning-text: #b45309;
  --color-star: #f59e0b;
  --overlay-bg: color-mix(in srgb, var(--text-main) var(--opacity-overlay), transparent);
}

/* 🌙 Dark Theme Variables */
:root[data-theme="dark"] {
  color-scheme: dark;
  --social-instagram-color: #f472b6;
  --social-google-color: #4285F4;
  --primary-color: #f97316;
  --primary-hover: #ea580c;
  --primary-light: color-mix(in srgb, var(--primary-color) var(--opacity-surface), transparent);
  --on-primary-color: #ffffff;
  --logo-color: #f87171;
  --logo-badge-bg: color-mix(in srgb, var(--logo-color) var(--opacity-surface), transparent);
  --logo-badge-color: #f87171;
  --logo-badge-border: color-mix(in srgb, var(--logo-color) 30%, transparent);

  --bg-color: #0f172a;
  --bg-secondary: #1e293b;
  --bg-card: #1e293b;
  --bg-card-hover: #334155;

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-link: #fb923c;
  --text-link-hover: #fdba74;

  --meta-area-color: #60a5fa;
  --meta-area-bg: color-mix(in srgb, var(--meta-area-color) var(--opacity-surface), transparent);
  --meta-area-border: color-mix(in srgb, var(--meta-area-color) 30%, transparent);

  --meta-category-color: #34d399;
  --meta-category-bg: color-mix(in srgb, var(--meta-category-color) var(--opacity-surface), transparent);
  --meta-category-border: color-mix(in srgb, var(--meta-category-color) 30%, transparent);

  --meta-tag-color: #cbd5e1;
  --meta-tag-bg: color-mix(in srgb, var(--meta-tag-color) var(--opacity-surface), transparent);
  --meta-tag-border: color-mix(in srgb, var(--meta-tag-color) 30%, transparent);
  --meta-tag-active-bg: #475569;
  --meta-tag-active-color: #f8fafc;
  --meta-tag-active-border: #94a3b8;

  --border-color: color-mix(in srgb, var(--text-main) 10%, transparent);
  --header-bg: color-mix(in srgb, var(--bg-color) 88%, transparent);
  --shadow-primary: 0 6px 20px color-mix(in srgb, var(--primary-color) 40%, transparent);
  --shadow-primary-hover: 0 8px 24px color-mix(in srgb, var(--primary-color) 50%, transparent);
  --shadow-overlay: 0 20px 45px color-mix(in srgb, #000000 60%, transparent);
  --shadow-dropdown: 0 16px 40px -6px color-mix(in srgb, #000000 60%, transparent), 0 4px 16px color-mix(in srgb, #000000 40%, transparent);
  --shadow-focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent);

  --color-do: #4ade80;
  --color-do-bg: color-mix(in srgb, var(--color-do) var(--opacity-surface), transparent);
  --color-dont: #f87171;
  --color-dont-bg: color-mix(in srgb, var(--color-dont) var(--opacity-surface), transparent);
  --color-warning: #fbbf24;
  --color-warning-bg: color-mix(in srgb, var(--color-warning) 20%, transparent);
  --color-warning-text: #fef08a;
  --color-star: #fbbf24;
  --overlay-bg: color-mix(in srgb, var(--bg-color) 85%, transparent);
}