:root {
    /* ==========================================
       COLOR SYSTEM — Dark Premium Theme
       Semillas de Creatividad × Bennet Inspired
       ========================================== */

    /* Backgrounds */
    --color-bg-primary: #0a0a0a;
    --color-bg-secondary: #141414;
    --color-bg-card: #1a1a1a;

    /* Text */
    --color-text-primary: #ffffff;
    --color-text-secondary: #a0a0a0;
    --color-text-muted: #555555;

    /* Brand Accent — Naranja Semillas */
    --color-accent: #f15a23;
    --color-accent-hover: #d94d1a;
    --color-accent-glow: rgba(241, 90, 35, 0.4);
    --color-accent-subtle: rgba(241, 90, 35, 0.15);

    /* Borders */
    --color-border: #222222;
    --color-border-subtle: rgba(255, 255, 255, 0.08);
    --color-border-medium: rgba(255, 255, 255, 0.15);

    /* ==========================================
       TYPOGRAPHY
       ========================================== */
    --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;

    /* Font Sizes — Fluid */
    --text-xs: clamp(0.7rem, 0.6vw + 0.5rem, 0.75rem);
    --text-sm: clamp(0.875rem, 0.8vw + 0.6rem, 1rem);
    --text-base: clamp(1rem, 0.95vw + 0.75rem, 1.125rem);
    --text-lg: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem);
    --text-xl: clamp(1.5rem, 2vw + 0.75rem, 2rem);
    --text-2xl: clamp(2rem, 3.5vw + 1rem, 3.5rem);
    --text-3xl: clamp(3rem, 5vw + 1.5rem, 5rem);
    --text-hero: clamp(5rem, 10vw + 2rem, 11rem);

    /* Font Weights */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-black: 900;

    /* Line Heights */
    --leading-tight: 0.95;
    --leading-title: 1.1;
    --leading-normal: 1.4;
    --leading-relaxed: 1.6;

    /* Letter Spacings */
    --tracking-tight: -0.04em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.12em;
    --tracking-widest: 0.2em;

    /* ==========================================
       SPACING SCALE
       ========================================== */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */
    --space-40: 10rem;    /* 160px */
    --space-48: 12rem;    /* 192px */

    /* Named Spacings for Sections */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    --spacing-xxl: 10rem;

    /* ==========================================
       LAYOUT
       ========================================== */
    --container-max: 1440px;
    --container-content: 1200px;
    --container-text: 680px;
    --gutter: clamp(1rem, 4vw, 3rem);

    /* ==========================================
       BORDER RADIUS
       ========================================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 40px;
    --radius-full: 9999px;

    /* ==========================================
       SHADOWS
       ========================================== */
    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 30px var(--color-accent-glow);
    --shadow-glow-sm: 0 0 15px rgba(241, 90, 35, 0.3);

    /* ==========================================
       TRANSITIONS
       ========================================== */
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --transition-fast: 0.2s var(--ease-out);
    --transition-normal: 0.4s var(--ease-out);
    --transition-slow: 0.7s var(--ease-out);
    --transition-slower: 1s var(--ease-in-out);

    /* ==========================================
       Z-INDEX SCALE
       ========================================== */
    --z-base: 0;
    --z-above: 10;
    --z-sticky: 40;
    --z-header: 50;
    --z-overlay: 100;
    --z-cursor: 9999;
}