/* ==============================================================
   Talents Design System — global design tokens
   These are available everywhere (incl. portaled UI like dialogs,
   toasts, MudBlazor overlays). Reference via var(--talents-*) from
   any scoped or global stylesheet.
   ============================================================== */

:root {
    /* Primary palette */
    --talents-ink: #0D2D3F;
    --talents-brand: #4AC4FF;
    --talents-brand-strong: #0D80BB;
    --talents-brand-light: #E8F8FF;

    /* Surfaces */
    --talents-bg: #F8FBFD;
    --talents-surface: #FAFCFD;

    /* Borders (light → strong) */
    --talents-border: #EDF2F5;
    --talents-border-strong: #DDE8EE;
    --talents-border-card: #E2EBF0;

    /* Text scale */
    --talents-muted: #7A9BAD;
    --talents-label: #4A6878;
    --talents-placeholder: #9BB8C5;

    /* Misc */
    --talents-pill-bg: #F2F5F7;

    /* ============================================================
       Design-system aliases used by company-details scoped CSS
       and other design-handoff components. Mapped to talents-* where
       possible; standalone where needed.
       ============================================================ */

    /* Text & ink */
    --ink: var(--talents-ink);
    --font-sans: 'Inter', 'Inter Tight', 'Roboto', system-ui, -apple-system, Segoe UI, sans-serif;

    /* Brand ramp */
    --brand-50:  #F0FAFF;
    --brand-100: #C5EDFF;
    --brand-200: #BCE7FA;
    --brand-400: var(--talents-brand);
    --brand-500: #1FAEF0;
    --brand-600: var(--talents-brand-strong);
    --brand-700: #0A5F8A;
    --brand-800: #074260;
    --brand-900: #042D43;
    --focus-brand: 0 0 0 3px rgba(74, 196, 255, 0.18);
    --focus-error: 0 0 0 3px rgba(244, 63, 94, 0.10);

    /* Info ramp (alias of brand for badges/icons) */
    --info:        #4AC4FF;
    --info-bg:     #E8F8FF;
    --info-border: #A8E3F7;

    /* Priority dot palette */
    --dot-filled:  #4AC4FF;
    --dot-partial: #A8E3F7;
    --dot-empty:   #DCF0F9;

    /* Neutrals */
    --neutral-surface:        var(--talents-surface);
    --neutral-bg:             var(--talents-bg);
    --neutral-border:         var(--talents-border);
    --neutral-border-strong:  var(--talents-border-strong);
    --neutral-card-border:    var(--talents-border-card);
    --neutral-pill-bg:        var(--talents-pill-bg);
    --neutral-muted:          var(--talents-muted);
    --neutral-label:          var(--talents-label);
    --neutral-placeholder:    var(--talents-placeholder);

    /* Semantic */
    --success:        #1F9D55;
    --success-bg:     #E7F7EE;
    --success-border: #C2EBD2;
    --success-text:   #0F6B36;

    --warning:        #D98D14;
    --warning-bg:     #FFF6E5;
    --warning-border: #FBE3B0;
    --warning-text:   #8A540B;

    --error:        #D8364C;
    --error-bg:     #FCEBED;
    --error-border: #F4C2C9;
    --error-text:   #8E1A2C;

    /* Spacing scale (4-pt base) */
    --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;

    /* Radii */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   10px;
    --radius-lg2:  14px;
    --radius-xl:   18px;
    --radius-xl2:  20px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(13, 45, 63, 0.06), 0 1px 1px rgba(13, 45, 63, 0.04);
    --shadow-md: 0 2px 16px rgba(13, 45, 63, 0.07);

    /* Type scale */
    --fs-caption:  12px;
    --fs-label:    13px;
    --fs-body:     14px;
    --fs-card:     16px;
    --fs-section:  18px;
    --fs-overline: 11px;
    --fs-hero:     30px;
    --fs-title:    23px;

    /* Weights */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;
}