/* ==========================================================================
   HALO BENTO — LAYER 1: TOKENS
   --------------------------------------------------------------------------
   White canvas, solid brand tiles (Adriana's Insurance: red, navy, yellow,
   blue; green for success only), Bricolage Grotesque + Onest, spring motion.
   Spec: docs/design-system/HALO_BENTO.md and the Halo Bento design system
   artifact. Semantic names are the token API; only values belong to Bento.

   Colour families are RGB channel triplets so any recipe can composite the
   same colour at any alpha: rgb(var(--halo-red) / .12).
   ========================================================================== */

:root {
    color-scheme: light;

    /* ----------------------------------------------------------------------
       1. COLOUR FAMILIES (Adriana's Insurance)
       ---------------------------------------------------------------------- */
    --halo-red:    225  20  27;   /* #E1141B */
    --halo-navy:    16  66 104;   /* #104268 */
    --halo-blue:    26 111 173;   /* #1A6FAD */
    --halo-yellow: 244 180   0;   /* #F4B400 */
    --halo-green:    5 122  85;   /* #057A55 */
    --halo-gray:    90 100 117;   /* #5A6475 */

    /* ----------------------------------------------------------------------
       2. SEMANTIC ASSIGNMENT — pick the meaning, never the hue.
       ---------------------------------------------------------------------- */
    --halo-tone-brand:    var(--halo-navy);
    --halo-tone-info:     var(--halo-blue);
    --halo-tone-success:  var(--halo-green);
    --halo-tone-warning:  var(--halo-yellow);
    --halo-tone-critical: var(--halo-red);
    --halo-tone-pipeline: var(--halo-navy);
    --halo-tone-neutral:  var(--halo-gray);
    --halo-tone-campaign: var(--halo-blue);

    /* Readable inks: text and icons on surface, canvas and their tints. */
    --halo-ink-brand:    #104268;
    --halo-ink-info:     #135A8E;
    --halo-ink-success:  #05603F;
    --halo-ink-warning:  #7A5200;
    --halo-ink-critical: #B3121A;
    --halo-ink-pipeline: #104268;
    --halo-ink-campaign: #135A8E;
    --halo-ink-neutral:  #475063;

    /* Filled actions keep white labels legible (red is the one primary CTA). */
    --halo-action-brand:    #E1141B;
    --halo-action-critical: #B3121A;
    --halo-action-warning:  #7A5200;
    --halo-action-success:  #057A55;
    --halo-action-info:     #1A6FAD;
    --halo-action-neutral:  #475063;
    --halo-on-action:       #FFFFFF;

    /* Solid tile fills (bento tiles, call stage, live pills) and their text. */
    --halo-fill-red:    #E1141B;
    --halo-fill-navy:   #104268;
    --halo-fill-blue:   #1A6FAD;
    --halo-fill-yellow: #F4B400;
    --halo-fill-green:  #057A55;
    --halo-fill-gray:   #5A6475;
    --halo-on-fill:        #FFFFFF;
    --halo-on-fill-yellow: #0E2E4A;

    /* Soft opaque pairs for status pills and alerts (bg / text). */
    --halo-soft-red:    #FFE4E2;  --halo-soft-red-ink:    #B3121A;
    --halo-soft-navy:   #E4EEF7;  --halo-soft-navy-ink:   #104268;
    --halo-soft-blue:   #DDEEFB;  --halo-soft-blue-ink:   #135A8E;
    --halo-soft-yellow: #FFF2C9;  --halo-soft-yellow-ink: #7A5200;
    --halo-soft-green:  #DCF5E8;  --halo-soft-green-ink:  #05603F;
    --halo-soft-gray:   #EEF1F5;  --halo-soft-gray-ink:   #475063;

    /* ----------------------------------------------------------------------
       3. SURFACES & TEXT
       ---------------------------------------------------------------------- */
    --halo-canvas:          #FFFFFF;
    --halo-surface:         #FFFFFF;
    --halo-surface-raised:  #FFFFFF;   /* menus, dialogs, softphone, toasts */
    --halo-surface-sunken:  #F4F6F9;   /* search fields, tracks, footers    */
    --halo-surface-hover:   #F4F6F9;
    --halo-surface-pressed: #E9EDF3;
    --halo-surface-inverse: #0E1B2B;

    --halo-text:            #0E1B2B;
    --halo-text-secondary:  #46505F;
    --halo-text-tertiary:   #667085;
    --halo-text-inverse:    #FFFFFF;
    --halo-text-on-tint:    #0E1B2B;

    --halo-hairline:        rgb(16 66 104 / .10);
    --halo-hairline-strong: rgb(16 66 104 / .18);

    --halo-input-border:       #8290A2;   /* 3.2:1 on white */
    --halo-input-border-hover: #5D6779;
    --halo-scrim:              rgb(10 13 19 / .35);
    --halo-content-max-width:  100%;

    --halo-tint-brand:    rgb(var(--halo-tone-brand) / .08);
    --halo-tint-info:     rgb(var(--halo-tone-info) / .09);
    --halo-tint-success:  rgb(var(--halo-tone-success) / .09);
    --halo-tint-warning:  rgb(var(--halo-tone-warning) / .16);
    --halo-tint-critical: rgb(var(--halo-tone-critical) / .08);
    --halo-tint-pipeline: rgb(var(--halo-tone-pipeline) / .08);
    --halo-tint-neutral:  rgb(var(--halo-tone-neutral) / .08);
    --halo-selection:     rgb(var(--halo-tone-info) / .16);

    /* Navbar active indicator. */
    --halo-indicator:    #104268;
    --halo-on-indicator: #FFFFFF;

    /* ----------------------------------------------------------------------
       4. DATA VISUALISATION — categorical, fixed order, never severity.
       ---------------------------------------------------------------------- */
    --halo-series-1: 16 66 104;    /* navy   */
    --halo-series-2: 244 180 0;    /* yellow */
    --halo-series-3: 225 20 27;    /* red    */
    --halo-series-4: 79 168 240;   /* sky    */
    --halo-series-5: 5 122 85;     /* green  */
    --halo-series-6: 90 100 117;   /* gray   */
    --halo-series-compare: 148 163 184;
    --halo-chart-grid: rgb(16 66 104 / .08);
    --halo-dataset-leads:    var(--halo-blue);
    --halo-dataset-sales:    var(--halo-green);
    --halo-dataset-receipts: var(--halo-navy);
    --halo-dataset-calls:    var(--halo-yellow);
    --halo-dataset-forms:    var(--halo-red);
    --halo-block-kpi: 156px; --halo-block-chart: 320px; --halo-block-table: 480px;

    /* ----------------------------------------------------------------------
       5. SPACE — 4pt scale.
       ---------------------------------------------------------------------- */
    --halo-1:  4px;   --halo-2:  8px;   --halo-3: 12px;  --halo-4: 16px;
    --halo-5: 20px;   --halo-6: 24px;   --halo-8: 32px;  --halo-10: 40px;
    --halo-12: 48px;  --halo-16: 64px;
    --halo-gap: 14px;             /* between bento tiles and cards */

    /* ----------------------------------------------------------------------
       6. RADIUS — scales with size; controls are pills.
       ---------------------------------------------------------------------- */
    --halo-radius-xs:   6px;    /* checkboxes, kbd                */
    --halo-radius-sm:   10px;   /* icon tiles                     */
    --halo-radius-md:   14px;   /* rows, keys, alerts, menus      */
    --halo-radius-lg:   20px;   /* bubbles, board cards           */
    --halo-radius-xl:   26px;   /* cards, dialogs                 */
    --halo-radius-2xl:  30px;   /* bento tiles, sheets, softphone */
    --halo-radius-pill: 999px;  /* buttons, inputs, pills, navbar */

    /* ----------------------------------------------------------------------
       7. TYPE — Bricolage Grotesque for numbers and titles, Onest for UI.
       ---------------------------------------------------------------------- */
    --halo-font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --halo-font-display: 'Bricolage Grotesque', 'Onest', -apple-system, system-ui, sans-serif;
    --halo-font-numeric: var(--halo-font-display);
    --halo-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --halo-text-caption: 0.75rem;    /* 12px — captions, pills, headers */
    --halo-text-sm:      0.8125rem;  /* 13px — dense UI default         */
    --halo-text-body:    0.875rem;   /* 14px — messages, dialogs        */
    --halo-text-title:   1.0625rem;  /* 17px — card titles              */
    --halo-text-page:    1.75rem;    /* 28px — page titles              */
    --halo-text-display: 2.125rem;   /* 34px — metric numbers in cards  */
    --halo-text-hero:    3.625rem;   /* 58px — bento tile numbers       */

    --halo-tracking-tight: -0.03em;
    --halo-tracking-wide:   0.04em;

    /* ----------------------------------------------------------------------
       8. ELEVATION — cards are flat; shadow means "this floats".
       ---------------------------------------------------------------------- */
    --halo-shadow-flat: none;
    --halo-shadow-1: 0 1px 2px rgb(16 30 60 / .05);
    --halo-shadow-2: 0 1px 2px rgb(16 30 60 / .05), 0 14px 34px -16px rgb(16 30 60 / .18);
    --halo-shadow-3: 0 30px 70px -24px rgb(10 25 50 / .40), 0 2px 6px rgb(10 25 50 / .08);
    --halo-shadow-4: 0 40px 90px -28px rgb(10 25 50 / .50), 0 4px 10px rgb(10 25 50 / .10);
    --halo-shadow-lift: 0 22px 40px -22px rgb(16 30 60 / .45);

    /* ----------------------------------------------------------------------
       9. MOTION — Apple-style spring for navigation, out for feedback.
       ---------------------------------------------------------------------- */
    --halo-ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --halo-ease:        var(--halo-ease-spring);
    --halo-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --halo-duration-1: 150ms;   /* hover, colour                */
    --halo-duration-2: 250ms;   /* press, tabs, small enter     */
    --halo-duration-3: 400ms;   /* menus, drawers, scrim        */
    --halo-duration-4: 600ms;   /* screens, sheets, indicators  */
    --halo-transition:        var(--halo-duration-2) var(--halo-ease-out);
    --halo-transition-fast:   var(--halo-duration-1) var(--halo-ease-out);
    --halo-transition-spring: var(--halo-duration-4) var(--halo-ease-spring);

    /* ----------------------------------------------------------------------
       10. FOCUS — solid 2px ring with a 2px gap.
       ---------------------------------------------------------------------- */
    --halo-focus-color: #1A6FAD;
    --halo-focus-ring: 0 0 0 2px var(--halo-canvas), 0 0 0 4px var(--halo-focus-color);
    --halo-focus-ring-field: 0 0 0 4px rgb(26 111 173 / .18);

    /* 11. CONTROL METRICS */
    --halo-control-sm: 30px;
    --halo-control-md: 38px;
    --halo-control-lg: 44px;
    --halo-row: 60px;
    --halo-row-compact: 48px;
    --halo-dialog-compact: 420px;
    --halo-dialog-standard: 640px;
    --halo-dialog-wide: 880px;
    --halo-dialog-large: 960px;
    --halo-dialog-workspace: 1120px;
    --halo-dialog-expanded: 1280px;
    /* Aligned with MudBlazor layers: popovers 1200, dialogs 1400, snackbars 1500.
       The softphone floats above page widgets (mascot, bulk bars) but below dialogs. */
    --halo-navbar-offset: 68px;
    --halo-z-sticky: 100;
    --halo-z-nav: 200;
    --halo-z-drawer: 1250;
    --halo-z-softphone: 1300;
    /* Form drawers cover the phone; portaled pickers remain above dialogs. */
    --halo-z-context-drawer: 1350;
    --halo-z-modal: 1400;
    --halo-z-toast: 1500;

    /* Document canvas is paper in either UI theme; it is exported content. */
    --halo-paper: #fff;
    --halo-paper-ink: #0E1B2B;
}

/* ==========================================================================
   DARK THEME — navy-black canvas, pale inks, same solid tiles.
   Opt in with <html data-theme="dark"> or any .halo-dark ancestor.
   ========================================================================== */
:root[data-theme="dark"],
.halo-dark {
    color-scheme: dark;
    --halo-navy: 27 75 122;

    --halo-ink-brand:    #B8D4F0;
    --halo-ink-info:     #9FD0F7;
    --halo-ink-success:  #8EE8BE;
    --halo-ink-warning:  #FFD766;
    --halo-ink-critical: #FFB0AB;
    --halo-ink-pipeline: #B8D4F0;
    --halo-ink-campaign: #9FD0F7;
    --halo-ink-neutral:  #CBD2DE;

    --halo-action-critical: #C8141C;
    --halo-action-warning:  #8A5D00;
    --halo-action-neutral:  #5A6475;
    --halo-fill-navy: #1B4B7A;

    --halo-soft-red:    #3A1517;  --halo-soft-red-ink:    #FFB0AB;
    --halo-soft-navy:   #15273A;  --halo-soft-navy-ink:   #B8D4F0;
    --halo-soft-blue:   #0F2B42;  --halo-soft-blue-ink:   #9FD0F7;
    --halo-soft-yellow: #3A2E07;  --halo-soft-yellow-ink: #FFD766;
    --halo-soft-green:  #0D2E22;  --halo-soft-green-ink:  #8EE8BE;
    --halo-soft-gray:   #212736;  --halo-soft-gray-ink:   #CBD2DE;

    --halo-canvas:          #0A0D13;
    --halo-surface:         #131821;
    --halo-surface-raised:  #182030;
    --halo-surface-sunken:  #1A2030;
    --halo-surface-hover:   #1A2030;
    --halo-surface-pressed: #232A3B;
    --halo-surface-inverse: #F2F5FA;

    --halo-text:            #F2F5FA;
    --halo-text-secondary:  #C3CAD6;
    --halo-text-tertiary:   #8F98A8;
    --halo-text-inverse:    #0E1B2B;
    --halo-text-on-tint:    #F2F5FA;

    --halo-hairline:        rgb(255 255 255 / .08);
    --halo-hairline-strong: rgb(255 255 255 / .15);

    --halo-input-border:       #5D6779;
    --halo-input-border-hover: #8F98A8;
    --halo-scrim:              rgb(0 0 0 / .62);

    --halo-tint-brand:    rgb(var(--halo-tone-brand) / .30);
    --halo-tint-info:     rgb(var(--halo-tone-info) / .20);
    --halo-tint-success:  rgb(var(--halo-tone-success) / .20);
    --halo-tint-warning:  rgb(var(--halo-tone-warning) / .16);
    --halo-tint-critical: rgb(var(--halo-tone-critical) / .18);
    --halo-tint-pipeline: rgb(var(--halo-tone-pipeline) / .30);
    --halo-tint-neutral:  rgb(var(--halo-tone-neutral) / .22);
    --halo-selection:     rgb(var(--halo-tone-info) / .32);

    --halo-indicator:    #F2F5FA;
    --halo-on-indicator: #0E2E4A;

    --halo-series-1: 108 180 240;
    --halo-series-2: 244 180 0;
    --halo-series-3: 255 107 107;
    --halo-series-4: 45 212 191;
    --halo-series-5: 52 211 153;
    --halo-series-6: 148 163 184;
    --halo-series-compare: 100 116 139;
    --halo-chart-grid: rgb(255 255 255 / .07);

    --halo-shadow-1: 0 0 0 1px rgb(255 255 255 / .04);
    --halo-shadow-2: 0 0 0 1px rgb(255 255 255 / .04), 0 14px 34px -16px rgb(0 0 0 / .7);
    --halo-shadow-3: 0 30px 70px -24px rgb(0 0 0 / .85), 0 0 0 1px rgb(255 255 255 / .06);
    --halo-shadow-4: 0 40px 90px -28px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .08);
    --halo-shadow-lift: 0 22px 40px -22px rgb(0 0 0 / .8);

    --halo-focus-color: #6CB4F0;
    --halo-focus-ring-field: 0 0 0 4px rgb(108 180 240 / .24);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --halo-duration-1: 1ms;
        --halo-duration-2: 1ms;
        --halo-duration-3: 150ms;
        --halo-duration-4: 150ms;
    }
}