/* ============================================================================
   Design tokens - Rangeela Reports.

   THE ONLY PLACE A COLOUR, SIZE, RADIUS OR SHADOW IS DEFINED.
   Values are the Fluent UI 2 / Power BI set from docs/ui/power-bi-pattern-book.md
   section 1. Nothing else in the app introduces a hex literal; every other
   stylesheet, and report-dashboard.js, reads these.

   Loaded FIRST on every page - signed in or not - so the sign-in screen and the
   app shell are the same product.
   ============================================================================ */

:root {
    /* ── surfaces ─────────────────────────────────────────────────────────── */
    --canvas:        #F3F2F1;  /* page background behind cards */
    --surface:       #FFFFFF;  /* cards, toolbars, inputs */
    --surface-2:     #FAF9F8;  /* form footers, table footers */
    --surface-3:     #F5F5F5;  /* hover fill */

    /* ── strokes ──────────────────────────────────────────────────────────── */
    --divider:       #E0E0E0;  /* hairlines between regions */
    --stroke:        #D1D1D1;  /* control borders */
    --stroke-strong: #616161;  /* input bottom border (Fluent underline) */

    /* ── text ─────────────────────────────────────────────────────────────── */
    --fg-1:          #242424;  /* primary */
    --fg-2:          #424242;  /* secondary */
    --fg-3:          #616161;  /* muted, captions, axis labels */
    --fg-disabled:   #BDBDBD;
    --fg-on-brand:   #FFFFFF;

    /* ── brand - accent only: primary action, links, selection ────────────── */
    --brand:         #0F6CBD;
    --brand-hover:   #115EA3;
    --brand-pressed: #0C3B5E;
    --brand-tint:    #EBF3FC;  /* selected rows, active nav, bulk bar */
    --brand-tint-2:  #CFE4FA;

    /* ── status - never reused as a chart series ──────────────────────────── */
    --success:       #107C10;  --success-bg: #F1FAF1;  --success-stroke: #9FD89F;
    --warning:       #BC4B09;  --warning-bg: #FFF9F5;  --warning-stroke: #F2C39B;
    --danger:        #C50F1F;  --danger-bg:  #FDF3F4;  --danger-stroke:  #EEACB2;
    --info:          #0F6CBD;  --info-bg:    #F0F6FC;  --info-stroke:    #B4D6FA;

    /* ── chart series - assign by index, in this order, never cycled ──────── */
    --viz-1: #0F6CBD;  --viz-2: #DA3B01;  --viz-3: #00909B;
    --viz-4: #986F0B;  --viz-5: #8764B8;  --viz-6: #107C10;
    --viz-grid: #E0E0E0;  --viz-axis-text: #616161;

    /* ── geometry ─────────────────────────────────────────────────────────── */
    --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px;
    --sh2:  0 1px 2px rgb(0 0 0 / .14), 0 0 2px rgb(0 0 0 / .12);
    --sh8:  0 4px 8px rgb(0 0 0 / .14), 0 0 2px rgb(0 0 0 / .12);
    --sh16: 0 8px 16px rgb(0 0 0 / .14), 0 0 2px rgb(0 0 0 / .12);

    /* ── rhythm ───────────────────────────────────────────────────────────── */
    --gutter:    12px;   /* gap between cards on the canvas */
    --row-h:     36px;   /* grid row height */
    --ctl-h:     32px;   /* input and button height */
    --max-field: 420px;  /* a single form field never exceeds this */
    --topbar-h:  48px;
    --rail-w:    240px;  /* expanded sidebar */
    --rail-w-sm: 48px;   /* collapsed rail */

    /* ── spacing scale - 4 8 12 16 20 24 32, and nothing else ─────────────── */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

    /* ── type ─────────────────────────────────────────────────────────────── */
    /* Segoe UI Variable ships with Windows only; Inter is the closest substitute
       in metrics and tone and is the one this app loads from Google Fonts. */
    --font: 'Segoe UI Variable', 'Segoe UI', Inter, system-ui, -apple-system, sans-serif;
    --fs-caption: 12px;  --lh-caption: 16px;
    --fs-body:    14px;  --lh-body:    20px;
    --fs-section: 16px;  --lh-section: 22px;
    --fs-title:   20px;  --lh-title:   26px;
    --fs-kpi:     28px;  --lh-kpi:     34px;

    /* focus ring - Fluent's, never replaced by a colour change */
    --focus-ring: 0 0 0 1px var(--surface), 0 0 0 3px var(--brand);
}