@font-face {
    font-family: 'CarettaOffice';
    src: url('../assets/fonts/CarettaOfficeRegular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CarettaOffice';
    src: url('../assets/fonts/CarettaOfficeBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* === LEGACY TOKENS (folosite de app.js, NU le modificăm) === */
    --bg-color: #f4f6f9;
    --surface-color: #ffffff;
    --text-main: #2d3436;
    --text-muted: #636e72;
    --primary-color: #003349; /* Caretta Corporate Blue */
    --primary-hover: #002637;
    --accent-color: #E0004D; /* Caretta Corporate Orange/Red Accent */
    --border-color: #dfe6e9;
    --card-shadow: 0 12px 30px -10px rgba(0,0,0,0.08), 0 4px 10px -2px rgba(0,0,0,0.04);
    --card-shadow-hover: 0 20px 40px -12px rgba(0,0,0,0.12), 0 8px 16px -4px rgba(0,0,0,0.06);
    --transition: cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --font-caretta: 'CarettaOffice', 'Montserrat', 'Segoe UI', sans-serif;

    /* === DESIGN SYSTEM TOKENS — Caretta Performance v2026 === */
    /* Aditive; pot fi folosite oriunde fără să rupă stilurile existente. */

    /* Brand */
    --caretta-navy:        #003349;
    --caretta-navy-deep:   #002637;
    --caretta-navy-50:     #e8eef0;
    --caretta-red:         #E0004D;
    --caretta-red-soft:    #fde6ee;

    /* Surface */
    --bg-canvas:           #f6f8fb;
    --bg-surface:          #ffffff;
    --bg-surface-hover:    #fafbfd;
    --bg-elevated:         #ffffff;
    --bg-subtle:           #f1f4f9;

    /* Text */
    --text-strong:         #0f172a;
    --text-default:        #1f2937;
    --text-soft:           #6b7280;
    --text-faint:          #9ca3af;

    /* Semantic (semafor business) */
    --signal-on-track:     #10b981;
    --signal-watch:        #f59e0b;
    --signal-action:       #ef4444;
    --signal-info:         #0ea5e9;

    /* Borders & elevations */
    --border-subtle:       #e7ecf3;
    --border-strong:       #cbd5e1;
    --elev-1: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.04);
    --elev-2: 0 4px 12px -2px rgba(15,23,42,0.06), 0 2px 4px -2px rgba(15,23,42,0.04);
    --elev-3: 0 12px 28px -8px rgba(15,23,42,0.10);

    /* Radii */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-pill: 999px;

    /* Spacing (scale 4-base) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;

    /* Type scale */
    --fs-display: clamp(1.4rem, 1.05rem + 1vw, 1.7rem);
    --fs-h2: 1.1rem;
    --fs-h3: 0.95rem;
    --fs-body: 0.9rem;
    --fs-small: 0.8rem;
    --fs-eyebrow: 0.7rem;

    /* Chart container heights (max permis) */
    --chart-h-sm: 240px;
    --chart-h-md: 280px;
    --chart-h-lg: 320px;
}