/*
 * CSS Custom Properties (Design Tokens)
 * Level10 Coming Soon Page
 */

:root {
  /* Brand Colors */
  --color-primary-1: #E74c3c;
  --color-primary-2: #f5b041;
  --color-accent: #5dade2;
  --color-neutral-dark: #1c1c1e;
  --color-neutral-light-1: #F5f5f7;
  --color-neutral-light-2: #eaeaea;

  /* Gradients */
  --gradient-1: linear-gradient(135deg, var(--color-primary-1) 0%, var(--color-primary-2) 100%);
  --gradient-2: linear-gradient(135deg, var(--color-accent) 0%, var(--color-neutral-dark) 100%);
  --gradient-3: linear-gradient(135deg, var(--color-accent) 0%, var(--color-neutral-light-2) 100%);

  /* Animated Gradient (for hero background) */
  --gradient-animated: linear-gradient(
    -45deg,
    var(--color-primary-1),
    var(--color-primary-2),
    var(--color-accent),
    var(--color-primary-1)
  );

  /* Typography */
  --font-title: 'Oswald', sans-serif;
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Lato', sans-serif;
  --font-quote: 'Noto Serif', serif;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Font Sizes - Fluid Typography */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-size-md: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  --font-size-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --font-size-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --font-size-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --font-size-3xl: clamp(2.5rem, 1.75rem + 3.75vw, 4rem);
  --font-size-4xl: clamp(3rem, 2rem + 5vw, 5.5rem);

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  --transition-slower: 700ms ease-in-out;

  /* Z-Index Scale */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-fixed: 1000;
  --z-modal: 10000;
  --z-toast: 100000;

  /* Container Width */
  --container-max-width: 1200px;
  --container-padding: var(--space-md);

  /* Neumorphic Shadow Distance */
  --neu-distance: 20px;
  --neu-blur: 40px;
}

/* Dark Theme (Default) */
[data-theme="dark"] {
  --bg-primary: var(--color-neutral-dark);
  --bg-secondary: #2c2c2e;
  --bg-tertiary: #3a3a3c;

  --text-primary: var(--color-neutral-light-1);
  --text-secondary: var(--color-neutral-light-2);
  --text-tertiary: #a8a8aa;

  /* Neumorphic Shadows - Dark */
  --neu-shadow-light: rgba(255, 255, 255, 0.05);
  --neu-shadow-dark: rgba(0, 0, 0, 0.5);

  --neu-shadow:
    var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-shadow-light);

  --neu-shadow-inset:
    inset var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    inset calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-shadow-light);

  --neu-shadow-hover:
    calc(var(--neu-distance) * 1.5) calc(var(--neu-distance) * 1.5) calc(var(--neu-blur) * 1.5) var(--neu-shadow-dark),
    calc(var(--neu-distance) * -1.5) calc(var(--neu-distance) * -1.5) calc(var(--neu-blur) * 1.5) var(--neu-shadow-light);
}

/* Light Theme */
[data-theme="light"] {
  --bg-primary: var(--color-neutral-light-1);
  --bg-secondary: #ffffff;
  --bg-tertiary: var(--color-neutral-light-2);

  --text-primary: var(--color-neutral-dark);
  --text-secondary: #3a3a3c;
  --text-tertiary: #6c6c6e;

  /* Neumorphic Shadows - Light */
  --neu-shadow-light: rgba(255, 255, 255, 0.8);
  --neu-shadow-dark: rgba(0, 0, 0, 0.15);

  --neu-shadow:
    var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-shadow-light);

  --neu-shadow-inset:
    inset var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    inset calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-shadow-light);

  --neu-shadow-hover:
    calc(var(--neu-distance) * 1.5) calc(var(--neu-distance) * 1.5) calc(var(--neu-blur) * 1.5) var(--neu-shadow-dark),
    calc(var(--neu-distance) * -1.5) calc(var(--neu-distance) * -1.5) calc(var(--neu-blur) * 1.5) var(--neu-shadow-light);
}