:root {
    /* ==========================================================================
       ARLIBROS DESIGN TOKENS (CORE SYSTEM)
       ========================================================================== */
       
    /* 1. COLOR PALETTE (Light Mode) */
    --color-ink: #0f172a;          /* Texto principal (Slate 900) */
    --color-muted: #64748b;        /* Texto secundario / Meta (Slate 500) */
    --color-paper: #ffffff;        /* Fondo principal (Tarjetas, base) */
    --color-soft: #f8fafc;         /* Fondo secundario suave (Slate 50) */
    --color-line: #e2e8f0;         /* Bordes y separadores (Slate 200) */
    
    /* Semantic Colors (Overridable via DB for Tenants) */
    --color-accent: #4f46e5;       /* Primary Action (Indigo 600) */
    --color-accent-dark: #3730a3;  /* Hover state / Headers (Indigo 800) */
    
    /* Feedback Colors */
    --color-success: #059669;
    --color-error: #dc2626;
    --color-warning: #d97706;
    
    /* Inverted Colors */
    --color-black: #020617;
    --color-white: #ffffff;
    
    /* 2. SPACING SCALE (Harmonic rhythm) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* 3. TYPOGRAPHY SCALE */
    --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
    --font-editorial: 'Plus Jakarta Sans', 'Inter', sans-serif;
    
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-h1: clamp(1.75rem, 4.5vw, 2.5rem);
    --text-h2: clamp(1.35rem, 3.5vw, 1.875rem);
    --text-h3: clamp(1.15rem, 2.5vw, 1.5rem);
    --text-display: clamp(2.5rem, 5vw, 4rem);

    /* 4. LAYOUT & BORDERS */
    --wrap-width: min(1120px, calc(100vw - var(--space-xl)));
    --border-radius-sm: 6px;
    --border-radius: 12px;
    --border-radius-lg: 20px;
    
    --nav-bottom-height: 64px;
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    
    /* 5. SHADOWS & ELEVATION */
    --shadow-sm: 0 2px 8px rgba(30, 27, 24, 0.04);
    --shadow-base: 0 4px 16px rgba(30, 27, 24, 0.08);
    --shadow-hover: 0 12px 32px rgba(30, 27, 24, 0.12);
    --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.15);
    
    /* 6. TRANSITIONS */
    --transition-fast: 0.15s ease-out;
    --transition-base: 0.25s ease-out;

    /* 7. Z-INDEX LAYERS */
    --z-base: 1;
    --z-dropdown: 50;
    --z-nav: 100;
    --z-modal: 1000;
    --z-toast: 2000;
}

/* ==========================================================================
   DARK THEME OVERRIDES
   ========================================================================== */
.dark-theme {
    --color-ink: #f8fafc;
    --color-muted: #94a3b8;
    --color-paper: #0f172a;
    --color-soft: #1e293b;
    --color-line: #334155;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-base: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.6);
}