/* =============================================
   JAPAN 2026 — Design Tokens
   Theme: "Sakura Sunset"
   ============================================= */

:root {
  /* ---- Primary Palette ---- */
  --primary: #E63946;
  --primary-light: #FF6B6B;
  --primary-dark: #C1121F;
  --primary-glow: rgba(230, 57, 70, 0.4);

  /* ---- Secondary ---- */
  --secondary: #1D3557;
  --secondary-light: #264773;
  --secondary-dark: #0F1D30;

  /* ---- Accents ---- */
  --accent: #F4A261;
  --accent-light: #FFBE85;
  --accent-dark: #D4803A;
  --accent-pink: #F28FAD;
  --accent-sakura: #FFB7C5;
  --accent-teal: #2EC4B6;
  --accent-purple: #7B2D8E;

  /* ---- Backgrounds ---- */
  --bg-dark: #0A0E17;
  --bg-dark-2: #111827;
  --bg-dark-3: #1A1F2E;
  --bg-dark-card: #161B2E;
  --bg-light: #F8F5F0;
  --bg-light-2: #EDE8E0;
  --bg-cream: #FFF8F0;

  /* ---- Glass ---- */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-hover: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-hover: rgba(255, 255, 255, 0.2);
  --glass-shadow: rgba(0, 0, 0, 0.3);

  /* ---- Text ---- */
  --text-primary: #FAFAFA;
  --text-secondary: rgba(250, 250, 250, 0.7);
  --text-muted: rgba(250, 250, 250, 0.45);
  --text-dark: #1A1A2E;
  --text-dark-secondary: rgba(26, 26, 46, 0.7);
  --text-dark-muted: rgba(26, 26, 46, 0.45);

  /* ---- Gradients ---- */
  --gradient-hero: linear-gradient(135deg, #0A0E17 0%, #1D3557 50%, #0A0E17 100%);
  --gradient-primary: linear-gradient(135deg, #E63946, #FF6B6B);
  --gradient-accent: linear-gradient(135deg, #F4A261, #E63946);
  --gradient-sakura: linear-gradient(135deg, #FFB7C5, #FF6B6B);
  --gradient-sunset: linear-gradient(135deg, #F4A261, #E63946, #7B2D8E);
  --gradient-ocean: linear-gradient(135deg, #2EC4B6, #1D3557);
  --gradient-dark-card: linear-gradient(145deg, rgba(22, 27, 46, 0.8), rgba(10, 14, 23, 0.9));
  --gradient-mesh-1: radial-gradient(at 20% 80%, rgba(230, 57, 70, 0.15) 0%, transparent 50%);
  --gradient-mesh-2: radial-gradient(at 80% 20%, rgba(244, 162, 97, 0.1) 0%, transparent 50%);
  --gradient-mesh-3: radial-gradient(at 50% 50%, rgba(29, 53, 87, 0.2) 0%, transparent 60%);

  /* ---- Typography ---- */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font Sizes — Fluid */
  --fs-hero: clamp(3rem, 8vw, 7rem);
  --fs-hero-sub: clamp(1.1rem, 2.5vw, 1.8rem);
  --fs-h1: clamp(2.2rem, 5vw, 4rem);
  --fs-h2: clamp(1.6rem, 3.5vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 2.5vw, 1.6rem);
  --fs-body: clamp(0.95rem, 1.2vw, 1.1rem);
  --fs-small: clamp(0.8rem, 1vw, 0.9rem);
  --fs-xs: 0.75rem;

  /* Font Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* ---- Spacing ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  --space-section: clamp(4rem, 10vh, 8rem);

  /* ---- Border Radius ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.4);
  --shadow-glow-primary: 0 0 30px rgba(230, 57, 70, 0.3);
  --shadow-glow-accent: 0 0 30px rgba(244, 162, 97, 0.3);
  --shadow-inner: inset 0 2px 10px rgba(0, 0, 0, 0.2);

  /* ---- Transitions ---- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ---- Z-Index Scale ---- */
  --z-behind: -1;
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-max: 9999;

  /* ---- Layout ---- */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --nav-height: 70px;
}