@property --hue-1 {
  syntax: "<number>";
  inherits: false;
  initial-value: 38;
}

@property --hue-2 {
  syntax: "<number>";
  inherits: false;
  initial-value: 200;
}

@property --gradient-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  /* Background */
  --bg-deep: #08080e;
  --bg-surface: #0c0c16;

  /* Text */
  --text-primary: #e8e8f0;
  --text-secondary: #9999b0;
  --text-muted: #555570;

  /* Accents — industrial / machining palette */
  --accent-amber: #f59e0b;
  --accent-steel: #38bdf8;
  --accent-silver: #94a3b8;

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.05);
  --glass-blur: 20px;

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

  /* Section max width */
  --max-width: 1100px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 800ms;

  /* Nav height */
  --nav-height: 64px;

  /* Font sizes — fluid */
  --fs-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --fs-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --fs-md: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-lg: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --fs-xl: clamp(2rem, 1.5rem + 2.5vw, 3.2rem);
  --fs-hero: clamp(2.8rem, 2rem + 4vw, 5rem);
}