/* Design Tokens - Astro Haze Theme */

/* Local Google Sans & Product Sans Fonts */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ProductSans-Regular.woff') format('woff'),
       local('Google Sans Regular'), local('Product Sans');
}

@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/ProductSans-Bold.woff') format('woff'),
       local('Google Sans Bold'), local('Product Sans Bold');
}

@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/ProductSans-Bold.woff') format('woff'),
       local('Google Sans Bold'), local('Product Sans Bold');
}

@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/static/fonts/ProductSans-Black.woff') format('woff'),
       local('Google Sans Black'), local('Product Sans Black');
}

@font-face {
  font-family: 'Product Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ProductSans-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Product Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/ProductSans-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Product Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/ProductSans-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Product Sans';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/static/fonts/ProductSans-Black.woff') format('woff');
}

:root {
  /* Light mode tokens */

  /* Glass effect */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-solid: rgba(255, 255, 255, 0.7);
  --glass-blur-xs: 4px;
  --glass-blur-sm: 8px;
  --glass-blur: 12px;
  --glass-blur-lg: 20px;
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  --glass-sat: 180%;

  /* Aurora gradient colors (Light mode: Crisp Sky, Cyan, Periwinkle & Aqua — No Pink) */
  --aurora-1: hsl(210, 95%, 75%);  /* Luminous Sky Blue */
  --aurora-2: hsl(192, 90%, 70%);  /* Electric Cyan */
  --aurora-3: hsl(222, 85%, 80%);  /* Serene Periwinkle Cloud Mist */
  --aurora-4: hsl(165, 75%, 72%);  /* Soft Mint / Aqua */

  /* Base colors */
  --color-bg: hsl(216, 30%, 97%);  /* Crisp clean cloud-white #f6f8fb */
  --color-surface: rgba(255, 255, 255, 0.65);
  --color-text: hsl(220, 25%, 11%);
  --color-text-muted: hsl(220, 16%, 36%);
  --color-text-inverse: hsl(220, 20%, 96%);

  /* Accent colors (Light mode: Cloud Azure / Royal Blue) */
  --color-accent: hsl(217, 90%, 56%);
  --color-accent-light: hsl(210, 95%, 68%);
  --color-accent-dark: hsl(221, 84%, 46%);
  --color-accent-glass: hsla(217, 90%, 56%, 0.1);
  --color-accent-text: hsl(221, 84%, 46%);

  /* Semantic colors */
  --color-success: hsl(142, 71%, 45%);
  --color-warning: hsl(45, 93%, 47%);
  --color-error: hsl(0, 72%, 51%);
  --color-info: hsl(207, 90%, 54%);

  /* Typography */
  --font-sans:
    'Google Sans', 'Product Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;

  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.25rem);
  --text-4xl: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  --text-5xl: clamp(3rem, 2.2rem + 3vw, 3.75rem);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  /* The two largest steps carry section rhythm, where a fixed 3/4rem is too
     much air on a phone. They scale with the viewport and settle at the
     previous values on a desktop-width screen. */
  --space-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --space-3xl: clamp(2.5rem, 2rem + 3vw, 4rem);

  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Z-index layers */
  --z-sticky: 200;
  --z-overlay: 300;
  --z-toast: 500;

  /* Layout */
  --header-height: 60px;

  /* Container */
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-max: 80rem;
}

/* Dark mode tokens */
[data-theme='dark'] {
  /* Aurora gradient colors for dark mode */
  --aurora-1: hsl(275, 80%, 65%);
  --aurora-2: hsl(200, 95%, 60%);
  --aurora-3: hsl(285, 75%, 60%);
  --aurora-4: hsl(160, 70%, 55%);

  /* Glass effect - darker, more saturated */
  --glass-bg: rgba(0, 0, 0, 0.2);
  --glass-bg-solid: rgba(0, 0, 0, 0.7);
  --glass-blur: 16px;
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --glass-sat: 150%;

  /* Base colors */
  --color-bg: hsl(220, 20%, 8%);
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-text: hsl(220, 20%, 95%);
  --color-text-muted: hsl(220, 15%, 65%);
  --color-text-inverse: hsl(220, 20%, 10%);

  /* Accent colors adjusted for dark mode */
  --color-accent: hsl(280, 80%, 65%);
  --color-accent-light: hsl(280, 80%, 75%);
  --color-accent-dark: hsl(280, 80%, 55%);
  --color-accent-glass: hsla(280, 80%, 65%, 0.15);
  /* On dark backgrounds the lighter accent already clears AA, so accent text
     uses the brighter value here. */
  --color-accent-text: hsl(280, 80%, 75%);
}

/* Reduced transparency preference */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-bg-solid: rgba(255, 255, 255, 0.98);
    --glass-blur-xs: 0px;
    --glass-blur-sm: 0px;
    --glass-blur: 0px;
    --glass-blur-lg: 0px;
    --glass-border: rgba(0, 0, 0, 0.1);
  }

  [data-theme='dark'] {
    --glass-bg: rgba(20, 20, 20, 0.95);
    --glass-bg-solid: rgba(10, 10, 10, 0.98);
    --glass-blur-xs: 0px;
    --glass-blur-sm: 0px;
    --glass-blur: 0px;
    --glass-blur-lg: 0px;
    --glass-border: rgba(255, 255, 255, 0.1);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}