/* ═══════════════════════════════════════════════════════
   CCL Dashboard v3 — Design Tokens
   Generated: 2026-02-10

   Single source of truth for all visual primitives.
   Import this FIRST in every page.
   ═══════════════════════════════════════════════════════ */

:root {
    /* ─── Brand ─── */
    --teal:          #487A7B;
    --teal-dark:     #005151;
    --teal-light:    #6B9A9A;
    --teal-wash:     rgba(72, 122, 123, 0.06);
    --teal-subtle:   rgba(72, 122, 123, 0.10);
    --teal-glow:     rgba(72, 122, 123, 0.20);
    --orange:        #F68D2E;
    --orange-light:  #FF9A5A;
    --orange-wash:   rgba(246, 141, 46, 0.08);

    /* ─── Neutrals ─── */
    --white:    #FFFFFF;
    --gray-50:  #FAFAFA;
    --gray-100: #F4F4F5;
    --gray-200: #E4E4E7;
    --gray-300: #D4D4D8;
    --gray-400: #A1A1AA;
    --gray-500: #71717A;
    --gray-600: #52525B;
    --gray-700: #3F3F46;
    --gray-800: #27272A;
    --gray-900: #18181B;

    /* ─── Status ─── */
    --success:       #10B981;
    --success-wash:  rgba(16, 185, 129, 0.08);
    --warning:       #F59E0B;
    --warning-wash:  rgba(245, 158, 11, 0.08);
    --error:         #EF4444;
    --error-wash:    rgba(239, 68, 68, 0.08);

    /* ─── Grade Gradients ─── */
    --grade-a: linear-gradient(135deg, #10B981, #059669);
    --grade-b: linear-gradient(135deg, #487A7B, #005151);
    --grade-c: linear-gradient(135deg, #F59E0B, #D97706);
    --grade-d: linear-gradient(135deg, #F97316, #EA580C);
    --grade-f: linear-gradient(135deg, #EF4444, #DC2626);

    /* ─── Temperature Colors ─── */
    --temp-hot:    #EF4444;
    --temp-warm:   #F59E0B;
    --temp-cool:   #3B82F6;
    --temp-cold:   #64748B;
    --temp-frozen: #9CA3AF;

    /* ─── Shadows ─── */
    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -3px rgba(0, 0, 0, 0.04);
    --shadow-teal:  0 4px 14px rgba(72, 122, 123, 0.18);

    /* ─── Border Radius ─── */
    --r-sm:   6px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-xl:   16px;
    --r-full: 9999px;

    /* ─── Spacing Scale ─── */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;

    /* ─── Transitions ─── */
    --fast: 150ms ease;
    --base: 200ms ease;
    --slow: 300ms ease;

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

    /* ─── Layout ─── */
    --header-height: 96px;
    --container-max: 1120px;
    --container-pad: var(--s-8);
}

/* ═══════════════════════════════════════════════════════
   ANIMATIONS (keyframes used across components)
   ═══════════════════════════════════════════════════════ */

@keyframes slot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(246, 141, 46, 0.05); }
    50%      { box-shadow: 0 0 0 4px rgba(246, 141, 46, 0.08); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}