/* ─────────────────────────────────────────────
   Auth Learn — Design Tokens
   Theme: Red & Black
   Single source of truth for colors, spacing, typography
   ───────────────────────────────────────────── */

:root {

    /* ─── Admin Layout ────────────────────── */
    --admin-sidebar-w:            264px;
    --admin-sidebar-w-collapsed:  80px;
    --admin-topbar-h:             72px;

    /* ─── Data Viz (charts) ───────────────── */
    --chart-bar:          var(--brand-primary);
    --chart-bar-soft:     #fecaca;
    --chart-grid:         var(--color-divider);

    /* ─── Status Tones (semantic) ─────────── */
    --tone-neutral-bg:    #f4f4f5;
    --tone-neutral-fg:    #3f3f46;
    --tone-red-bg:        #fee2e2;
    --tone-red-fg:        var(--brand-primary-dark);
    --tone-amber-bg:      #fef3c7;
    --tone-amber-fg:      #92400e;
    --tone-green-bg:      #dcfce7;
    --tone-green-fg:      #166534;

    /* ─── Press animation scale ───────────── */
    --press-scale: 0.97;


    /* ─── Brand Colors ────────────────────── */
    --brand-primary:       #dc2626;   /* Red-600 — main brand red */
    --brand-primary-dark:  #b91c1c;   /* Red-700 — hover states */
    --brand-primary-light: #ef4444;   /* Red-500 — lighter accent */
    --brand-accent:        #f59e0b;   /* Amber — high contrast pop */
    --brand-accent-hover:  #d97706;
    --brand-whatsapp:      #25d366;   /* Keep WhatsApp green */
    --brand-danger:        #ef4444;   /* Red-500 (slightly brighter for errors) */
    --brand-success:       #16a34a;

    /* ─── Extended Brand Palette (auth, marketing) ─── */
    --brand-navy:          #0a0a0a;   /* Near-black (replaces navy) */
    --brand-navy-soft:     #171717;   /* Dark charcoal */
    --brand-blue:          #dc2626;   /* Alias → brand red (kept name for compat) */
    --brand-blue-hover:    #b91c1c;
    --brand-blue-ring:     rgba(220, 38, 38, 0.18);
    --brand-accent-soft:   #fca5a5;   /* Light rose — eyebrow text on dark */

    /* ─── Neutrals ────────────────────────── */
    --color-bg:            #ffffff;
    --color-bg-soft:       #fafafa;   /* Near-white */
    --color-bg-muted:      #f5f5f5;
    --color-border:        #e5e5e5;
    --color-border-strong: #d4d4d4;

    --color-text:          #0a0a0a;   /* Near-black text */
    --color-text-soft:     #404040;
    --color-text-muted:    #737373;
    --color-text-inverse:  #ffffff;

    /* ─── Auth-specific Neutrals ─── */
    --color-bg-auth:            #f5f5f5;
    --color-input-border:       #d4d4d4;
    --color-input-border-hover: #a3a3a3;
    --color-placeholder:        #a3a3a3;
    --color-divider:            #e5e5e5;
    --color-text-label:         #171717;
    --color-text-helper:        #525252;

    /* ─── Typography ──────────────────────── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.25rem;
    --fs-2xl:  1.5rem;
    --fs-3xl:  1.875rem;
    --fs-4xl:  2.25rem;
    --fs-5xl:  3rem;
    --fs-6xl:  3.75rem;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;
    --fw-extrabold: 800;

    --lh-tight: 1.15;
    --lh-snug:  1.3;
    --lh-base:  1.6;

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

    /* ─── Radius ──────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* ─── Shadows ─────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.14);
    --shadow-brand: 0 8px 20px rgba(220, 38, 38, 0.22);

    /* ─── Transitions ─────────────────────── */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 150ms;
    --t-base: 220ms;
    --t-slow: 400ms;

    /* ─── Layout ──────────────────────────── */
    --container-max: 1240px;
    --navbar-h: 72px;
    --z-navbar: 100;
    --z-toast: 9999;
    --z-whatsapp: 500;
}