/* ============================================================
   AREC Design Tokens — global CSS custom properties
   Link this stylesheet BEFORE report-modern.css and any
   page-level stylesheets so tokens are available everywhere.
   ============================================================ */

:root {
    /* Brand blues */
    --color-brand-blue:       #2046b3;
    --color-brand-dark:       #1e3a5f;
    --color-brand-mid:        #3461d1;
    --color-brand-light:      #e8edf9;

    /* Gold accent */
    --color-gold-deep:        #b3882f;
    --color-gold-mid:         #d8bc72;
    --color-gold-light:       #f3e6b8;

    /* Neutrals */
    --color-text-primary:     #0f172a;
    --color-text-secondary:   #536170;
    --color-text-muted:       #64748b;
    --color-border:           #e2e8f0;
    --color-border-strong:    #cbd5e1;
    --color-surface:          #ffffff;
    --color-surface-subtle:   #f8fafc;
    --color-surface-raised:   #f1f5f9;

    /* Semantic */
    --color-positive:         #16a34a;
    --color-positive-bg:      #dcfce7;
    --color-negative:         #dc2626;
    --color-negative-bg:      #fee2e2;
    --color-warning:          #d97706;
    --color-warning-bg:       #fef3c7;
    --color-info:             #0284c7;
    --color-info-bg:          #e0f2fe;

    /* Gradients */
    --gradient-header:        linear-gradient(180deg, #f8fafc 0%, #e9eff7 100%);
    --gradient-gold:          linear-gradient(90deg, #b3882f, #d8bc72, #b3882f);
    --gradient-brand:         linear-gradient(135deg, #2046b3 0%, #1e3a5f 100%);

    /* Spacing scale */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Border radius */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.12);
    --shadow-gold: 0 0 8px rgba(179,136,47,0.25);

    /* Typography */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* Type scale */
    --text-display:    clamp(28px, 4vw, 48px);
    --text-heading:    clamp(20px, 3vw, 32px);
    --text-subheading: clamp(16px, 2vw, 22px);
    --text-body:       14px;
    --text-caption:    12px;
    --text-micro:      10px;

    /* Font weights */
    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;

    /* Line heights */
    --leading-tight:   1.1;
    --leading-snug:    1.3;
    --leading-normal:  1.55;
    --leading-relaxed: 1.65;

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-base:   200ms ease;
    --transition-slow:   300ms ease;
    --transition-tab:    180ms ease;
}

/* Dark-mode overrides */
html.dark {
    --color-text-primary:     #f1f5f9;
    --color-text-secondary:   #94a3b8;
    --color-text-muted:       #64748b;
    --color-border:           #334155;
    --color-border-strong:    #475569;
    --color-surface:          #0f172a;
    --color-surface-subtle:   #1e293b;
    --color-surface-raised:   #263248;

    --color-positive-bg:      #14532d;
    --color-negative-bg:      #7f1d1d;
    --color-warning-bg:       #78350f;
    --color-info-bg:          #0c4a6e;

    --gradient-header:        linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.30);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.40);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.50);
}