/* =========================================================
   NOVA ANALYTICS — DESIGN TOKENS

   Shared design values used across the website.
   This file defines values only. It should not style
   individual elements or components.
   ========================================================= */

:root {

    /* =====================================================
       LAYOUT
       ===================================================== */

    --na-content-width: 1200px;
    --na-content-width-narrow: 1000px;
    --na-content-padding: 20px;

    --na-navbar-height: 60px;


    /* =====================================================
       SPACING
       ===================================================== */

    --na-section-space: 60px;

    --na-gap-sm: 12px;
    --na-gap-md: 20px;
    --na-gap-lg: 32px;
    --na-gap-xl: 60px;


    /* =====================================================
       COLORS — BASE
       ===================================================== */

    --na-color-navy: #0f172a;
    --na-color-navy-dark: #0b1120;

    --na-color-blue: #1d4ed8;
    --na-color-blue-light: #93c5fd;

    --na-color-white: #ffffff;

    --na-color-slate-50: #f8fafc;
    --na-color-slate-100: #f1f5f9;
    --na-color-slate-200: #e2e8f0;
    --na-color-slate-300: #cbd5e1;
    --na-color-slate-500: #64748b;


    /* =====================================================
       COLORS — BRAND / ICONS
       ===================================================== */

    --na-icon-color: #8b2c2c;
    --na-icon-muted: #0f172a;

    --na-brand-primary: #8b2c2c; /* just new name */
    --na-brand-secondary: #b84a5a;


    /* =====================================================
       COURSE LEVELS
       ===================================================== */

    --level-beginner: #16a34a;
    --level-intermediate: #ca8a04;
    --level-advanced: #ea580c;
    --level-info: #1e3a8a;

    --level-beginner-bg: rgba(22, 163, 74, 0.10);
    --level-intermediate-bg: rgba(202, 138, 4, 0.10);
    --level-advanced-bg: rgba(234, 88, 12, 0.10);


    /* =====================================================
       ANALYTICAL ILLUSTRATIONS
       ===================================================== */

    --na-ill-primary: #1e3a8a;
    --na-ill-secondary: #6b8fd6;
    --na-ill-gold: #d8b04a;
    --na-ill-accent: #ea580c;
    --na-ill-green: #4caf72;

    --na-ill-grid: #aeb9d6;
    --na-ill-axis: #9aa6c3;


    /* =====================================================
       RADII
       ===================================================== */

    --na-radius-sm: 10px;
    --na-radius-md: 12px;
    --na-radius-lg: 18px;
    --na-radius-xl: 20px;
    --na-radius-pill: 999px;


    /* =====================================================
       SHADOWS
       ===================================================== */

    --na-shadow-box:
        0 8px 20px rgba(15, 23, 42, 0.12);

    --na-shadow-box-hover:
        0 12px 28px rgba(15, 23, 42, 0.16);

    --na-shadow-modal:
        0 24px 70px rgba(15, 23, 42, 0.30);


    /* =====================================================
       TRANSITIONS
       ===================================================== */

    --na-transition-fast: 0.15s ease;
    --na-transition-normal: 0.20s ease;
}