/* ══════════════════════════════════════════
   Elite Creed — Design Tokens (variables.css)
   ══════════════════════════════════════════ */

:root {
    /* ── Typography ── */
    --font-display: 'Playfair Display', 'Georgia', serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    --fs-h1:   clamp(2rem, 4vw, 3.25rem);
    --fs-h2:   clamp(1.5rem, 3vw, 2.25rem);
    --fs-h3:   clamp(1.25rem, 2.5vw, 1.75rem);
    --fs-h4:   1.125rem;
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-xs:   0.75rem;
    --fs-sm:   var(--fs-small);
    --fs-md:   var(--fs-body);
    --fs-lg:   var(--fs-h4);

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

    --leading-tight:  1.2;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    /* ── Executive Utility Palette: Navy / Gold / Charcoal ── */
    --color-bg-900:         #0B1929;
    --color-bg-850:         #0D1B2E;
    --color-bg-800:         #132240;
    --color-surface-700:    #1A2D4A;
    --color-surface-600:    #1E3355;

    /* Gold accents */
    --color-primary:        #FFD700;
    --color-primary-strong: #FFA500;
    --color-primary-deep:   #FF8C00;
    --color-primary-light:  #FFE44D;
    --color-primary-dim:    rgba(255, 215, 0, 0.15);

    /* Text */
    --color-text-primary:   #FFFFFF;
    --color-text-secondary: #E0E0E0;
    --color-text-muted:     #B0B0B0;
    --color-text-dark:      #1a1a2a;
    --color-white:          #FFFFFF;

    /* Compatibility aliases for older template tokens */
    --color-gray-50:        rgba(255, 255, 255, 0.04);
    --color-gray-100:       rgba(255, 255, 255, 0.08);
    --color-gray-200:       rgba(255, 255, 255, 0.12);
    --color-gray-300:       rgba(255, 255, 255, 0.18);
    --color-gray-400:       #8f93ad;
    --color-gray-500:       var(--color-text-muted);
    --color-gray-600:       #c9ccd8;
    --color-gray-700:       var(--color-text-secondary);
    --color-gray-900:       var(--color-text-primary);

    /* Borders */
    --color-border-soft:    rgba(255, 215, 0, 0.12);
    --color-border-medium:  rgba(255, 215, 0, 0.22);
    --color-border-strong:  rgba(255, 215, 0, 0.35);

    /* Accent colour (secondary to gold) */
    --color-accent:         #5EEAD4;
    --color-accent-light:   #99F6E4;
    --color-accent-dark:    #14B8A6;
    --color-accent-dim:     rgba(94, 234, 212, 0.15);

    /* Semantic status colours (dark-surface optimised) */
    --color-success:        #44ff44;
    --color-success-bg:     rgba(68, 255, 68, 0.12);
    --color-success-text:   #44ff44;
    --color-warning:        #FFA500;
    --color-warning-bg:     rgba(255, 165, 0, 0.14);
    --color-warning-text:   #FFA500;
    --color-danger:         #ff4444;
    --color-danger-bg:      rgba(255, 68, 68, 0.14);
    --color-danger-text:    #ff4444;
    --color-info:           #87CEEB;
    --color-info-bg:        rgba(135, 206, 235, 0.14);
    --color-info-text:      #87CEEB;

    /* Core surfaces */
    --bg-page:              linear-gradient(135deg, #0B1929 0%, #132240 50%, #0D1B2E 100%);
    --bg-page-solid:        #0B1929;
    --bg-card:              rgba(255, 215, 0, 0.06);
    --bg-card-hover:        rgba(255, 215, 0, 0.10);
    --bg-card-solid:        #111D32;
    --color-surface-raised: rgba(255, 255, 255, 0.06);
    --bg-sidebar:           rgba(11, 25, 41, 0.98);
    --bg-topbar:            rgba(11, 25, 41, 0.92);
    --bg-input:             rgba(255, 255, 255, 0.05);
    --bg-input-focus:       rgba(255, 255, 255, 0.08);

    /* Shadows and glow */
    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.18);
    --shadow-sm:   0 8px 24px rgba(0, 0, 0, 0.22);
    --shadow-md:   0 12px 32px rgba(0, 0, 0, 0.28);
    --shadow-lg:   0 18px 55px rgba(0, 0, 0, 0.32);
    --shadow-gold: 0 12px 40px rgba(255, 215, 0, 0.18);

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

    /* ── Spacing Scale ── */
    --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;

    /* ── Transitions ── */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* ── Layout ── */
    --sidebar-width: 260px;
    --sidebar-collapsed: 72px;
    --topbar-height: 64px;
    --container-max: 1280px;
}