/* ============================================
   Alpha-Pe Design Tokens
   ============================================ */

:root {
    /* ── Layout ── */
    --announcement-h: 36px;

    /* ── Brand Colors (HSL for flexibility) ── */
    --clr-primary-h: 222;
    --clr-primary-s: 80%;
    --clr-primary-l: 21%;
    --clr-primary: hsl(var(--clr-primary-h), var(--clr-primary-s), var(--clr-primary-l));
    --clr-primary-light: hsl(var(--clr-primary-h), var(--clr-primary-s), 30%);
    --clr-primary-dark: hsl(var(--clr-primary-h), var(--clr-primary-s), 14%);

    --clr-secondary-h: 357;
    --clr-secondary-s: 96%;
    --clr-secondary-l: 60%;
    --clr-secondary: hsl(var(--clr-secondary-h), var(--clr-secondary-s), var(--clr-secondary-l));
    --clr-secondary-light: hsl(var(--clr-secondary-h), var(--clr-secondary-s), 70%);

    --clr-accent-h: 200;
    --clr-accent-s: 62%;
    --clr-accent-l: 39%;
    --clr-accent: hsl(var(--clr-accent-h), var(--clr-accent-s), var(--clr-accent-l));
    --clr-accent-light: hsl(var(--clr-accent-h), var(--clr-accent-s), 50%);

    --clr-gold-h: 47;
    --clr-gold-s: 100%;
    --clr-gold-l: 62%;
    --clr-gold: hsl(var(--clr-gold-h), var(--clr-gold-s), var(--clr-gold-l));

    --clr-success-h: 162;
    --clr-success-s: 95%;
    --clr-success-l: 42%;
    --clr-success: hsl(var(--clr-success-h), var(--clr-success-s), var(--clr-success-l));

    --clr-warning: hsl(40, 100%, 50%);
    --clr-error: hsl(0, 84%, 60%);

    /* ── Gradients ── */
    --gradient-primary: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-accent) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(222, 80%, 18%) 0%, hsl(200, 62%, 32%) 50%, hsl(200, 55%, 42%) 100%);
    --gradient-card: linear-gradient(135deg, hsl(222, 80%, 24%) 0%, hsl(200, 62%, 42%) 100%);
    --gradient-gold: linear-gradient(135deg, hsl(47, 100%, 62%) 0%, hsl(38, 100%, 55%) 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 100%);

    /* ── Neutral Palette ── */
    --clr-neutral-950: hsl(230, 25%, 8%);
    --clr-neutral-900: hsl(230, 20%, 12%);
    --clr-neutral-800: hsl(230, 15%, 18%);
    --clr-neutral-700: hsl(230, 10%, 30%);
    --clr-neutral-600: hsl(230, 8%, 42%);
    --clr-neutral-500: hsl(230, 6%, 55%);
    --clr-neutral-400: hsl(230, 6%, 68%);
    --clr-neutral-300: hsl(230, 8%, 78%);
    --clr-neutral-200: hsl(230, 15%, 88%);
    --clr-neutral-100: hsl(230, 20%, 95%);
    --clr-neutral-50: hsl(230, 25%, 98%);
    --clr-white: #ffffff;

    /* ── Surface / Background Colors ── */
    --surface-primary: var(--clr-white);
    --surface-secondary: var(--clr-neutral-50);
    --surface-tertiary: var(--clr-neutral-100);
    --surface-inverse: var(--clr-primary);

    /* ── Text Colors ── */
    --text-primary: var(--clr-neutral-950);
    --text-secondary: var(--clr-neutral-600);
    --text-tertiary: var(--clr-neutral-500);
    --text-inverse: var(--clr-white);
    --text-link: var(--clr-accent);
    --text-heading: var(--clr-primary);

    /* ── Typography Scale (fluid) ── */
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-mono: 'Fira Code', 'Cascadia Code', monospace;

    --fs-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
    --fs-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
    --fs-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
    --fs-md: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    --fs-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
    --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --fs-2xl: clamp(2rem, 1.6rem + 1.5vw, 2.8rem);
    --fs-3xl: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    --fs-4xl: clamp(3rem, 2.2rem + 2.5vw, 4.5rem);

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;

    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-normal: 1.6;
    --lh-relaxed: 1.8;

    /* ── Spacing Scale ── */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    /* ── Container ── */
    --container-max: 1400px;
    --container-narrow: 900px;
    --container-wide: 1600px;
    --container-padding: clamp(1rem, 3vw, 2rem);

    /* ── Border Radius ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-2xl: 30px;
    --radius-full: 9999px;

    /* ── Shadows (Elevation) ── */
    --shadow-xs: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
    --shadow-glow-primary: 0 8px 30px hsla(var(--clr-primary-h), var(--clr-primary-s), var(--clr-primary-l), 0.25);
    --shadow-glow-accent: 0 8px 30px hsla(var(--clr-accent-h), var(--clr-accent-s), var(--clr-accent-l), 0.3);
    --shadow-glow-secondary: 0 8px 30px hsla(var(--clr-secondary-h), var(--clr-secondary-s), var(--clr-secondary-l), 0.3);

    /* ── Transitions ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 800ms;

    /* ── Z-Index Scale ── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
}