/* ==========================================================================
   CUEVANCE Design Tokens (Dual Liquid Themes)
   Version: 2.0.0
   ========================================================================== */

:root {
  /* Common Geometry & Spacing */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Typography Modular Scale */
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;

  /* Font Stacks: JP prioritized over SC for proper Japanese kanji rendering */
  --font-sans: 'Outfit', 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', 'Noto Sans SC', 'PingFang SC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Warning / Alert Colors */
  --accent-warning: #f59e0b;
  --accent-warning-glow: rgba(245, 158, 11, 0.25);
  --accent-warning-bg: rgba(245, 158, 11, 0.12);
  --accent-warning-border: rgba(245, 158, 11, 0.45);

  /* Transition Speeds */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
}

/* ==========================================================================
   THEME TOKENS: Cyber Neon (Dark Spatial Liquid)
   ========================================================================== */
body.theme-cyber-neon {
  --bg-dark: #080c1a;
  --bg-page-gradient: radial-gradient(ellipse at 20% 0%, rgba(56, 189, 248, 0.10) 0%, transparent 50%),
                      radial-gradient(ellipse at 80% 10%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
                      radial-gradient(ellipse at 50% 90%, rgba(52, 211, 153, 0.06) 0%, transparent 50%);
  --bg-card: rgba(15, 23, 42, 0.72);
  --bg-card-hover: rgba(30, 41, 59, 0.85);
  --bg-card-border: rgba(255, 255, 255, 0.15);
  --bg-input: rgba(8, 14, 30, 0.85);
  --bg-input-focus: rgba(15, 23, 42, 0.95);

  --card-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.35),
                 0 4px 16px -2px rgba(0, 0, 0, 0.40),
                 0 16px 32px -8px rgba(0, 0, 0, 0.30);
  --card-backdrop: blur(24px) saturate(180%);

  /* Neon Accents */
  --accent-cyan: #38bdf8;
  --accent-cyan-glow: rgba(56, 189, 248, 0.25);
  --accent-emerald: #34d399;
  --accent-emerald-glow: rgba(52, 211, 153, 0.25);
  --accent-purple: #a78bfa;
  
  /* Text on Accents (WCAG Contrast) */
  --accent-on-cyan: #020617;
  --accent-on-emerald: #020617;

  /* Typography Colors */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.85);
  --text-muted: rgba(255, 255, 255, 0.65);
  --text-dim: rgba(255, 255, 255, 0.45);

  /* SVG Canvas Colors */
  --canvas-bg: rgba(6, 10, 24, 0.90);
  --canvas-rect: rgba(56, 189, 248, 0.12);
  --canvas-stroke: #38bdf8;
  --canvas-hud-bg: rgba(15, 23, 42, 0.85);
  --canvas-grid: rgba(255, 255, 255, 0.20);
  --canvas-safe-action: #34d399;
  --canvas-safe-title: #fbbf24;
  --canvas-safe-sns: #f43f5e;
  --canvas-letterbox: rgba(0, 0, 0, 0.85);
  --text-alert-warning: #fbbf24;
}

/* ==========================================================================
   THEME TOKENS: Warm Studio (Light Organic)
   ========================================================================== */
body.theme-warm-studio {
  --bg-dark: #e8e2d5;
  --bg-page-gradient: radial-gradient(ellipse at 15% 10%, rgba(13, 148, 136, 0.12) 0%, transparent 45%),
                      radial-gradient(ellipse at 85% 15%, rgba(217, 119, 6, 0.10) 0%, transparent 45%),
                      radial-gradient(ellipse at 50% 85%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
  --bg-card: rgba(255, 255, 255, 0.75);
  --bg-card-hover: rgba(255, 255, 255, 0.90);
  --bg-card-border: rgba(15, 23, 42, 0.15);
  --bg-input: rgba(255, 255, 255, 0.90);
  --bg-input-focus: #ffffff;

  --card-shadow: inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.95),
                 0 4px 16px -2px rgba(45, 42, 38, 0.07),
                 0 12px 32px -6px rgba(45, 42, 38, 0.10);
  --card-backdrop: blur(24px) saturate(180%);

  /* Studio Accents */
  --accent-cyan: #0d9488;    /* Deep Studio Teal */
  --accent-cyan-glow: rgba(13, 148, 136, 0.20);
  --accent-emerald: #10b981; /* Studio Emerald */
  --accent-emerald-glow: rgba(16, 185, 129, 0.20);
  --accent-purple: #8b5cf6;

  /* Strict White Text on Dark Accents (WCAG 2.1 AAA) */
  --accent-on-cyan: #ffffff;
  --accent-on-emerald: #ffffff;

  /* Typography Colors */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #475569;
  --text-dim: #475569;

  /* SVG Canvas Colors */
  --canvas-bg: rgba(235, 230, 220, 0.90);
  --canvas-rect: rgba(13, 148, 136, 0.10);
  --canvas-stroke: #0d9488;
  --canvas-hud-bg: rgba(255, 255, 255, 0.90);
  --canvas-grid: rgba(0, 0, 0, 0.20);
  --canvas-safe-action: #059669;
  --canvas-safe-title: #d97706;
  --canvas-safe-sns: #e11d48;
  --canvas-letterbox: rgba(45, 42, 38, 0.75);
  --text-alert-warning: #b45309;
}