/* ==========================================================================
   UNITEK DESIGN SYSTEM - DESIGN TOKENS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');

:root {
  /* Core Colors */
  --color-primary-900: #0A0E27; /* Deep Space Navy - Main Background */
  --color-primary-800: #111638; /* Card Backgrounds */
  --color-primary-700: #1B2150; /* Elevated Surfaces */
  --color-primary-600: #252D6A;
  --color-primary-500: #303A85;

  --color-accent-400: #00D4FF;  /* Electric Cyan - Primary CTA */
  --color-accent-500: #0098B8;  /* Secondary Buttons */
  --color-accent-600: #006680;  /* Subtle Accents */
  
  --color-signal-400: #00FFC8;  /* Neon Teal - Success */
  --color-signal-500: #00CC78;  /* Secondary Highlights */
  --color-signal-glow: rgba(0, 255, 200, 0.5);

  --color-warm-400: #FFB800;    /* Amber Glow - Warnings/Premium */
  --color-warm-500: #FF8C00;    /* Urgent CTAs */

  /* Neutrals for Text & Borders */
  --color-neutral-100: #FFFFFF;
  --color-neutral-200: #F5F7FA;
  --color-neutral-300: #E8ECF4; /* Primary Text */
  --color-neutral-400: #C2C9D6;
  --color-neutral-500: #A0A8C0; /* Secondary Text */
  --color-neutral-600: #6B7394; /* Muted Text */
  --color-neutral-700: #4B5563;
  --color-neutral-800: #2A3055; /* Borders / Dividers */

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-800));
  --gradient-accent: linear-gradient(90deg, var(--color-accent-400), var(--color-signal-400));
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  --gradient-accent-glow: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(0,255,200,0.1));

  /* Typography */
  --font-family-display: 'Space Grotesk', system-ui, sans-serif;
  --font-family-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-family-base: 'Inter', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;

  /* Font Sizes - Fluid Typography */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: clamp(1.25rem, 2vw + 1rem, 1.5rem);      /* 20px - 24px */
  --font-size-3xl: clamp(1.75rem, 3vw + 1rem, 2.25rem);     /* 28px - 36px */
  --font-size-4xl: clamp(2.25rem, 4vw + 1rem, 3rem);        /* 36px - 48px */
  --font-size-5xl: clamp(3rem, 6vw + 1rem, 4.5rem);         /* 48px - 72px */

  /* Spacing Base Unit: 4px */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  
  --section-padding-y: clamp(4rem, 10vw, 8rem);  /* 64px - 128px */
  --section-padding-x: clamp(1.5rem, 5vw, 2rem); /* 24px - 32px */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 15px var(--color-signal-glow);

  /* Z-Index Hierarchy */
  --z-index-base: 1;
  --z-index-content: 10;
  --z-index-nav: 100;
  --z-index-dropdown: 200;
  --z-index-modal: 1000;
  --z-index-toast: 2000;
  
  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


/* Multi-language Font Overrides */
body.lang-ja {
  --font-family-base: 'Noto Sans JP', sans-serif;
  --font-family-heading: 'Noto Sans JP', sans-serif;
  --font-family-display: 'Noto Sans JP', sans-serif;
}

body.lang-ko {
  --font-family-base: 'Noto Sans KR', sans-serif;
  --font-family-heading: 'Noto Sans KR', sans-serif;
  --font-family-display: 'Noto Sans KR', sans-serif;
}