/* Declare layer order — must come before any @layer rules in other files */
@layer reset, base, layout, components, animations;

@layer base {
  :root {
    /* Colors */
    --clr-bg:            #05050f;
    --clr-bg-2:          #090920;
    --clr-accent-1:      #3b82f6;
    --clr-accent-2:      #6366f1;
    --clr-accent-3:      #818cf8;
    --clr-text:          #e8eeff;
    --clr-text-muted:    #7a8bbf;
    --clr-text-subtle:   #4a5680;
    --clr-star:          #fbbf24;

    --clr-glass-bg:      rgba(255, 255, 255, 0.04);
    --clr-glass-bg-hover:rgba(255, 255, 255, 0.08);
    --clr-glass-border:  rgba(255, 255, 255, 0.09);
    --clr-glass-border-hover: rgba(59, 130, 246, 0.4);

    --gradient-accent:   linear-gradient(135deg, var(--clr-accent-1), var(--clr-accent-2));
    --gradient-text:     linear-gradient(135deg, #60a5fa, #a5b4fc);
    --gradient-glow:     radial-gradient(ellipse at center, rgba(59,130,246,0.15) 0%, transparent 70%);

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

    /* Typography */
    --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --text-xs:      clamp(0.7rem,  1vw,   0.8rem);
    --text-sm:      clamp(0.875rem,1.5vw, 1rem);
    --text-base:    clamp(1rem,    1.8vw, 1.125rem);
    --text-lg:      clamp(1.125rem,2vw,   1.375rem);
    --text-xl:      clamp(1.375rem,3vw,   1.75rem);
    --text-2xl:     clamp(1.75rem, 4vw,   2.5rem);
    --text-3xl:     clamp(2.25rem, 5vw,   3.5rem);
    --text-hero:    clamp(2.5rem,  6.5vw, 5rem);

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

    /* Shadows */
    --shadow-sm:   0 2px 8px rgba(0,0,0,0.3);
    --shadow-md:   0 8px 32px rgba(0,0,0,0.5);
    --shadow-lg:   0 24px 64px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.35);
    --shadow-glow-sm: 0 0 20px rgba(59, 130, 246, 0.2);

    /* Transitions */
    --ease-out:    cubic-bezier(0.2, 0, 0, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast:      150ms var(--ease-out);
    --t-base:      300ms var(--ease-out);
    --t-slow:      500ms var(--ease-out);

    /* Layout */
    --container-max: 1200px;
    --container-pad: clamp(1rem, 5vw, 3rem);
  }
}