@layer reset, base, layout, components, animations, utilities;

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

  :root {
    --font-sans: "Space Grotesk", "Inter", "Segoe UI", sans-serif;

    --font-size-h1: clamp(2.25rem, 5.5vw, 4.5rem);
    --font-size-h2: clamp(1.55rem, 3.8vw, 2.75rem);
    --font-size-h3: clamp(1.1rem, 1.8vw, 1.3rem);
    --font-size-body: clamp(0.92rem, 1.5vw, 1.05rem);
    --font-size-small: clamp(0.82rem, 1.3vw, 0.9rem);
    --font-size-xs: clamp(0.72rem, 1.1vw, 0.8rem);

    --line-height-heading: 1.1;
    --line-height-body: 1.65;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-pill: 999px;

    --container-max: 1200px;
    --container-padding: clamp(1.5rem, 5vw, 3rem);
    --section-spacing: clamp(4rem, 10vw, 8rem);
    --header-height: 4rem;

    --motion-fast: 0.15s;
    --motion-base: 0.25s;
    --motion-slow: 0.5s;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --z-base: 1;
    --z-header: 100;
    --z-overlay: 200;

    --interactive-min: 44px;

    --gradient-angle: 132deg;

    --brand-primary: #5B6FE8;
    --brand-secondary: #8B5CE5;
    --brand-blue: #4A8FE8;
    --brand-purple: #9B5FDD;
    --brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  }

  [data-theme="dark"] {
    color-scheme: dark;

    --bg-primary: #000000;
    --bg-secondary: #0A0A0F;
    --bg-tertiary: #131318;
    --bg-elevated: #1a1a22;

    --surface-primary: rgba(255, 255, 255, 0.03);
    --surface-secondary: rgba(255, 255, 255, 0.05);
    --surface-hover: rgba(255, 255, 255, 0.08);

    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-accent: rgba(91, 111, 232, 0.4);

    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.45);
    --text-accent: #7B65E8;

    --header-bg: rgba(10, 10, 15, 0.85);
    --header-border: rgba(255, 255, 255, 0.06);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 40px rgba(91, 111, 232, 0.15);

    --selection-bg: rgba(91, 111, 232, 0.3);
    --focus-ring: rgba(123, 101, 232, 0.5);

    --logo-dark-display: block;
    --logo-light-display: none;
  }

  [data-theme="light"] {
    color-scheme: light;

    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5FF;
    --bg-tertiary: #EDEDFA;
    --bg-elevated: #FFFFFF;

    --surface-primary: rgba(91, 111, 232, 0.03);
    --surface-secondary: rgba(91, 111, 232, 0.06);
    --surface-hover: rgba(91, 111, 232, 0.08);

    --border-subtle: rgba(10, 10, 15, 0.05);
    --border-default: rgba(10, 10, 15, 0.1);
    --border-strong: rgba(10, 10, 15, 0.15);
    --border-accent: rgba(91, 111, 232, 0.3);

    --text-primary: #0A0A0F;
    --text-secondary: rgba(10, 10, 15, 0.65);
    --text-muted: rgba(10, 10, 15, 0.4);
    --text-accent: #7B65E8;

    --header-bg: rgba(255, 255, 255, 0.88);
    --header-border: rgba(10, 10, 15, 0.06);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 40px rgba(91, 111, 232, 0.1);

    --selection-bg: rgba(91, 111, 232, 0.18);
    --focus-ring: rgba(123, 101, 232, 0.4);

    --logo-dark-display: none;
    --logo-light-display: block;
  }
}