/* =============================================================================
   CareerTracker Design Tokens
   Generated by /design-extract — 2026-03-07

   These tokens complement the MudBlazor theme (CareerTrackerTheme.cs).
   MudBlazor palette colors are available as --mud-palette-* variables automatically.
   These custom properties cover accent colors, layout, and app-specific values
   that fall outside MudBlazor's theming system.
   ============================================================================= */

:root {
    /* --- Accent Colors (Dashboard Cards) --- */
    --ct-accent-green: #66BB6A;
    --ct-accent-blue: #42A5F5;
    --ct-accent-orange: #FFA726;
    --ct-accent-teal: #26A69A;
    --ct-accent-purple: #AB47BC;

    /* --- Surface / Background (app-specific) --- */
    --ct-color-background-gray: #F7F7F7;
    --ct-color-border: #DDDDDD;
    --ct-color-border-top-row: #D6D5D5;

    /* --- Text (secondary — primary handled by MudBlazor) --- */
    --ct-color-text-primary: #333333;
    --ct-color-text-secondary: #888888;
    --ct-color-text-tertiary: #999999;   /* #999 — captions, timestamps */
    --ct-color-text-muted: #aaaaaa;       /* #aaa — placeholder / de-emphasised */
    --ct-color-text-faint: #bbbbbb;       /* #bbb — faintest readable label */

    /* --- Semantic status colors (U3) — top-frequency hardcoded values -----
       These mirror the Material hues components hardcode today (#f44336 etc).
       Dark-mode overrides brighten them for legibility on a dark surface. */
    --ct-color-error: #f44336;
    --ct-color-success: #4caf50;
    --ct-color-warning: #ff9800;

    /* --- Surfaces (U2/U8) — card + muted backgrounds with dark equivalents -- */
    --ct-color-surface-card: #FFFFFF;
    --ct-color-surface-muted: #F5F5F5;
    --ct-color-border-light: #E0E0E0;

    /* --- Semantic highlight backgrounds --- */
    --ct-color-info-bg: #E3F2FD;
    --ct-color-success-bg: #E8F5E9;

    /* --- Gradient --- */
    --ct-gradient-sidebar: linear-gradient(180deg, #052767 0%, #3A0647 70%);

    /* --- Typography --- */
    --ct-font-family-body: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --ct-font-family-mono: 'Consolas', 'Courier New', monospace;

    /* --- Type scale (U6) — each token maps to a real pixel value already in
       use, so migrating a hardcoded font-size to its token is visually a no-op.
       Sizes do not change between light/dark, so no dark overrides needed. */
    --ct-font-size-2xs: 9px;
    --ct-font-size-xs: 10px;
    --ct-font-size-sm: 11px;
    --ct-font-size-base: 12px;
    --ct-font-size-md: 13px;
    --ct-font-size-lg: 14px;
    --ct-font-size-xl: 16px;
    --ct-font-size-2xl: 18px;
    --ct-font-size-3xl: 20px;

    --ct-font-weight-normal: 400;
    --ct-font-weight-medium: 500;
    --ct-font-weight-semibold: 600;
    --ct-font-weight-bold: 700;
    --ct-font-weight-extrabold: 800;
    --ct-font-weight-black: 900;

    /* --- Border Radius --- */
    --ct-radius-sm: 4px;
    --ct-radius-md: 8px;
    --ct-radius-lg: 12px;
    --ct-radius-dialog: 16px;

    /* --- Sidebar Navigation --- */
    --ct-nav-link-color: #d7d7d7;
    --ct-nav-link-active-bg: rgba(255, 255, 255, 0.37);
    --ct-nav-link-hover-bg: rgba(255, 255, 255, 0.1);
    --ct-nav-link-active-color: white;

    /* --- Wizard Dialog --- */
    --ct-wizard-header-bg: #2B4EFF;
    --ct-wizard-header-color: white;

    /* --- Buttons (#1224 consistency pass) -----------------------------------
       Single source of truth for the visual button system. Change these to
       restyle every button in the app. Sizes (sm/md/lg) map to MudBlazor's
       Size.Small / Size.Medium / Size.Large. The defaults below match the
       eyeballed-norm of existing button usage but eliminate the inline
       Style="height:35px" hacks scattered through the codebase. */
    --ct-btn-radius: 6px;
    --ct-btn-padding-x-sm: 10px;
    --ct-btn-padding-x-md: 16px;
    --ct-btn-padding-x-lg: 22px;
    --ct-btn-padding-y-sm: 4px;
    --ct-btn-padding-y-md: 6px;
    --ct-btn-padding-y-lg: 8px;
    --ct-btn-height-sm: 32px;
    --ct-btn-height-md: 38px;
    --ct-btn-height-lg: 44px;
    --ct-btn-font-weight: 500;
    --ct-btn-font-size-sm: 13px;
    --ct-btn-font-size-md: 14px;
    --ct-btn-font-size-lg: 15px;
    --ct-btn-gap: 6px;
    --ct-btn-icon-size: 18px;
    --ct-btn-disabled-opacity: 0.55;
    --ct-btn-hover-elevation: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* --- Dark Mode (navy-charcoal palette, inspired by example screenshot) --- */
[data-theme="dark"] {
    /* Accent Colors — brighter on dark for legibility */
    --ct-accent-green: #4ADE80;
    --ct-accent-blue: #60A5FA;
    --ct-accent-orange: #FBBF24;
    --ct-accent-teal: #2DD4BF;   /* teal highlight — matches PaletteDark.Tertiary */
    --ct-accent-purple: #C084FC;

    /* Surface / Background */
    --ct-color-background-gray: #1E1E2E;
    --ct-color-surface: #1E1E2E;
    --ct-color-border: #2A2A3E;
    --ct-color-border-top-row: #2A2A3E;

    /* Text */
    --ct-color-text-primary: #E2E2F0;
    --ct-color-text-secondary: #9494B0;
    --ct-color-text-tertiary: #8080A0;
    --ct-color-text-muted: #6E6E8A;
    --ct-color-text-faint: #5C5C76;

    /* Semantic status colors — brighter on dark for legibility */
    --ct-color-error: #FF6B6B;
    --ct-color-success: #4ADE80;
    --ct-color-warning: #FBBF24;

    /* Surfaces — match the dashboard card tones used elsewhere in dark mode */
    --ct-color-surface-card: #252538;
    --ct-color-surface-muted: #1E1E2E;
    --ct-color-border-light: #2A2A3E;

    /* Semantic highlight backgrounds — deep, low-saturation */
    --ct-color-info-bg: #0C1A2E;
    --ct-color-success-bg: #0A1F12;

    /* Gradient — deep navy to dark indigo */
    --ct-gradient-sidebar: linear-gradient(180deg, #0D0D1F 0%, #130D26 70%);

    /* Sidebar Navigation */
    --ct-nav-link-color: #9494B0;
    --ct-nav-link-active-bg: rgba(255, 255, 255, 0.12);
    --ct-nav-link-hover-bg: rgba(255, 255, 255, 0.06);
    --ct-nav-link-active-color: #E2E2F0;

    /* Wizard Dialog */
    --ct-wizard-header-bg: #1D2ECC;
    --ct-wizard-header-color: #E2E2F0;
}