/* ═══════════════════════════════════════════════════════════════
   Kudos Design System — CSS Custom Properties
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Primary Palette (KPMG Navy Blue) ────────────────────── */
    --color-primary:          #00338d;
    --color-primary-light:    #1a56db;
    --color-primary-lighter:  #dbeafe;
    --color-primary-dark:     #002266;
    --color-primary-rgb:      0, 51, 141;

    /* ── Accent (Blue teal — complementary to navy) ───────────── */
    --color-accent:           #0077b6;
    --color-accent-light:     #0096d6;
    --color-accent-lighter:   #e0f2fe;
    --color-accent-dark:      #005f8f;
    --color-accent-rgb:       0, 119, 182;

    /* ── Neutrals ─────────────────────────────────────────────── */
    --color-bg:               #f1f5f9;
    --color-surface:          #ffffff;
    --color-surface-hover:    #f8fafc;
    --color-border:           #e2e8f0;
    --color-border-light:     #f1f5f9;
    --color-text:             #1e293b;
    --color-text-secondary:   #64748b;
    --color-text-muted:       #94a3b8;
    --color-text-inverse:     #ffffff;

    /* ── Status Colors ────────────────────────────────────────── */
    --color-success:          #10b981;
    --color-success-light:    #d1fae5;
    --color-error:            #ef4444;
    --color-error-light:      #fee2e2;
    --color-warning:          #0077b6;
    --color-warning-light:    #e0f2fe;
    --color-info:             #3b82f6;
    --color-info-light:       #dbeafe;

    /* ── Grade Colors ─────────────────────────────────────────── */
    --color-grade-intern:           #94a3b8;
    --color-grade-consultant:       #3b82f6;
    --color-grade-senior:           #8b5cf6;
    --color-grade-manager:          #10b981;
    --color-grade-assoc-director:   #0077b6;
    --color-grade-director:         #00338d;
    --color-grade-partner:          #002266;

    /* ── Typography ───────────────────────────────────────────── */
    --font-family:            'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:              'Cascadia Code', 'Fira Code', Consolas, monospace;

    --font-size-xs:           0.75rem;     /* 12px */
    --font-size-sm:           0.8125rem;   /* 13px */
    --font-size-base:         0.875rem;    /* 14px */
    --font-size-md:           1rem;        /* 16px */
    --font-size-lg:           1.125rem;    /* 18px */
    --font-size-xl:           1.25rem;     /* 20px */
    --font-size-2xl:          1.5rem;      /* 24px */
    --font-size-3xl:          1.875rem;    /* 30px */
    --font-size-4xl:          2.25rem;     /* 36px */

    --font-weight-normal:     400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;

    --line-height-tight:      1.25;
    --line-height-normal:     1.5;
    --line-height-relaxed:    1.625;

    /* ── Spacing Scale ────────────────────────────────────────── */
    --space-0:   0;
    --space-1:   0.25rem;    /* 4px  */
    --space-2:   0.5rem;     /* 8px  */
    --space-3:   0.75rem;    /* 12px */
    --space-4:   1rem;       /* 16px */
    --space-5:   1.25rem;    /* 20px */
    --space-6:   1.5rem;     /* 24px */
    --space-8:   2rem;       /* 32px */
    --space-10:  2.5rem;     /* 40px */
    --space-12:  3rem;       /* 48px */
    --space-16:  4rem;       /* 64px */

    /* ── Layout ───────────────────────────────────────────────── */
    --sidebar-width:          260px;
    --sidebar-collapsed:      72px;
    --header-height:          64px;
    --content-max-width:      1200px;

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

    /* ── 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 rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);
    --shadow-xl:    0 20px 25px rgba(0, 0, 0, 0.08), 0 8px 10px rgba(0, 0, 0, 0.04);

    /* ── Transitions ──────────────────────────────────────────── */
    --transition-fast:     150ms ease;
    --transition-normal:   250ms ease;
    --transition-slow:     350ms ease;

    /* ── Z-Index Scale ────────────────────────────────────────── */
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-sidebar:    300;
    --z-header:     400;
    --z-modal:      500;
    --z-toast:      600;

    /* ── Theme Transition ─────────────────────────────────────── */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   Dark Theme Overrides
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --color-primary: #3b82f6;        /* slightly lighter blue for dark bg */
    --color-primary-light: #60a5fa;
    --color-primary-lighter: rgba(59,130,246,0.15);
    --color-primary-dark: #2563eb;

    --color-accent: #0096d6;
    --color-accent-light: #38b6ff;
    --color-accent-lighter: rgba(0,119,182,0.15);
    --color-accent-dark: #38b6ff;

    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-surface-hover: #334155;
    --color-border: #334155;
    --color-border-light: #1e293b;
    --color-text: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --color-text-inverse: #0f172a;

    --color-success-light: rgba(16,185,129,0.15);
    --color-error-light: rgba(239,68,68,0.15);
    --color-warning-light: rgba(245,158,11,0.15);
    --color-info-light: rgba(59,130,246,0.15);

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.4);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.5);
}

/* Theme transition for smooth dark mode toggle */
body, .app-sidebar, .app-header, .card, .modal, .stat-card, .kudos-card, .leaderboard, .data-table th {
    transition: var(--theme-transition);
}