/* ============================================================================
   SIP design tokens — the single source of truth for colour, space, shape and
   type in BOTH shells: the focused pages (focus.css) and the signed-in
   workspace (components.css, app.css). Loaded first, straight after Bootstrap,
   by App.razor.

   Rules the tokens encode (decisions: DESIGN):
   - Dark brand. Amber is kept for the single primary action, the active
     navigation marker and the logo mark. Selection uses neutral greys.
   - Text and control labels reach 4.5:1 on every surface they sit on, and the
     edge of a form field reaches 3:1 (checked by tests/Sip.Portal.Tests/Ui/
     DesignTokenTests, which reads this file — keep the hex values on one line
     each).
   - Sentence case everywhere; no uppercase micro-labels.

   Bootstrap 5.3 runs in dark mode (<html data-bs-theme="dark">) with its
   variables mapped onto these tokens at the bottom of this file, so no light or
   blue Bootstrap state can leak through.
   ========================================================================== */

:root {
    /* ---------- colour: surfaces ---------- */
    --sip-canvas: #0C0D0F;          /* the page */
    --sip-surface: #131417;         /* sidebar, top bar, wizard panels */
    --sip-card: #1C1E22;            /* cards, dialogs, menus */
    --sip-raise: #24262B;           /* hover on a card, pressed segment */
    --sip-input: #0F1013;           /* the inside of a field */

    /* ---------- colour: lines ---------- */
    --sip-hairline: #2C2E33;        /* dividers and card edges (decorative) */
    --sip-line-strong: #3A3D43;     /* quiet button edges, underlines */
    --sip-control-line: #6E7279;    /* the edge of a field: 3:1 on every surface, raise included */

    /* ---------- colour: text ---------- */
    --sip-text: #F4F5F6;            /* 15:1 on card */
    --sip-text-2: #B4B7BC;          /* secondary text, 8.3:1 on card */
    --sip-muted: #8A8E95;           /* hints, footnotes, placeholders: 5.1:1 on card, 4.6:1 on raise */
    --sip-muted-decor: #75787E;     /* icons and borders ONLY — 3.8:1 on card is too low for text */

    /* ---------- colour: brand ---------- */
    --sip-amber: #F2B233;           /* primary action, active nav marker, the mark */
    --sip-amber-hover: #F7C65E;
    --sip-on-amber: #241800;        /* text on amber: 9.3:1 */

    /* ---------- colour: status tones (chips, alerts, toasts, stats) ---------- */
    --sip-danger: #FF5A52;          /* danger as text or an icon: 5.4:1 on card */
    --sip-danger-strong: #D63A33;   /* filled danger buttons: white text 4.6:1 */
    --sip-danger-text: #FFB4AF;     /* text on a danger tint */
    --sip-success: #3FD07A;
    --sip-success-text: #A7EBC4;
    --sip-info: #4AA8FF;
    --sip-info-text: #A8D4FF;
    --sip-warning: #FF9A4D;         /* orange, deliberately not the brand amber */
    --sip-warning-text: #FFC9A3;

    /* The same tones as rgb triplets, for tints: rgba(var(--sip-danger-rgb), .12). */
    --sip-text-rgb: 244, 245, 246;
    --sip-amber-rgb: 242, 178, 51;
    --sip-danger-rgb: 255, 90, 82;
    --sip-success-rgb: 63, 208, 122;
    --sip-info-rgb: 74, 168, 255;
    --sip-warning-rgb: 255, 154, 77;

    /* ---------- space: 4 8 12 16 24 32 48 64 ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* ---------- shape ---------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Kept for the pages written before the scale (app.css, scoped page CSS). */
    --sip-radius: var(--radius-lg);
    --sip-radius-sm: 10px;

    /* ---------- controls ---------- */
    --control-h: 44px;              /* buttons and fields */
    --control-h-sm: 36px;           /* compact buttons in dense tables */

    /* ---------- type: 12 14 16 18 22 28 34 ---------- */
    --sip-font: 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
    --sip-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
    --text-xs: 0.75rem;     /* 12 */
    --text-sm: 0.875rem;    /* 14 */
    --text-md: 1rem;        /* 16 */
    --text-lg: 1.125rem;    /* 18 */
    --text-xl: 1.375rem;    /* 22 */
    --text-2xl: 1.75rem;    /* 28 */
    --text-3xl: 2.125rem;   /* 34 */
    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.55;

    /* ---------- focus ----------
       A 2px gap in the canvas colour, then a 2px ring in the text colour: visible on every surface
       and on amber, and never confused with selection. Shown on :focus-visible only, so a mouse
       click does not leave a ring behind. */
    --focus-ring: 0 0 0 2px var(--sip-canvas), 0 0 0 4px var(--sip-text);

    /* ---------- elevation and motion ---------- */
    --shadow-pop: 0 10px 32px rgba(0, 0, 0, 0.55);
    --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur-fast: 120ms;
    --dur: 200ms;

    /* ---------- layout ---------- */
    --shell-sidebar-w: 260px;
    --shell-top-h: 56px;
    --shell-max-w: 1280px;
    --z-sticky: 20;
    --z-drawer: 1030;
    --z-menu: 1060;
    --z-modal: 1050;
    --z-toast: 1090;

    color-scheme: dark;
}

/* Fingers, gloves and styluses get 52px targets, as the focused shell always has. */
@media (pointer: coarse) {
    :root {
        --control-h: 52px;
        --control-h-sm: 44px;
    }
}

/* ============================================================================
   Bootstrap, mapped onto the tokens. The attribute selector matches the dark
   theme's own block at the same specificity, and this file loads later, so the
   SIP values win everywhere Bootstrap reads a variable.
   ========================================================================== */

:root,
[data-bs-theme="dark"] {
    --bs-body-font-family: var(--sip-font);
    --bs-font-monospace: var(--sip-mono);
    --bs-body-bg: var(--sip-canvas);
    --bs-body-bg-rgb: 12, 13, 15;
    --bs-body-color: var(--sip-text);
    --bs-body-color-rgb: var(--sip-text-rgb);
    --bs-emphasis-color: var(--sip-text);
    --bs-emphasis-color-rgb: var(--sip-text-rgb);
    --bs-heading-color: var(--sip-text);
    --bs-secondary-color: var(--sip-text-2);
    --bs-secondary-color-rgb: 180, 183, 188;
    --bs-secondary-bg: var(--sip-card);
    --bs-secondary-bg-rgb: 28, 30, 34;
    --bs-tertiary-color: var(--sip-muted);
    --bs-tertiary-color-rgb: 138, 142, 149;
    --bs-tertiary-bg: var(--sip-surface);
    --bs-tertiary-bg-rgb: 19, 20, 23;
    --bs-border-color: var(--sip-hairline);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--radius-md);

    /* Links read as text with an underline (see components.css), never as amber or blue. */
    --bs-link-color: var(--sip-text);
    --bs-link-color-rgb: var(--sip-text-rgb);
    --bs-link-hover-color: var(--sip-text);
    --bs-link-hover-color-rgb: var(--sip-text-rgb);
    --bs-code-color: var(--sip-text);

    /* Bootstrap's "primary" is the SIP primary action; its blue never appears. */
    --bs-primary: var(--sip-amber);
    --bs-primary-rgb: var(--sip-amber-rgb);
    --bs-primary-text-emphasis: var(--sip-amber-hover);
    --bs-primary-bg-subtle: rgba(var(--sip-amber-rgb), 0.12);
    --bs-primary-border-subtle: rgba(var(--sip-amber-rgb), 0.4);
    --bs-info: var(--sip-info);
    --bs-info-rgb: var(--sip-info-rgb);
    --bs-info-text-emphasis: var(--sip-info-text);
    --bs-info-bg-subtle: rgba(var(--sip-info-rgb), 0.12);
    --bs-info-border-subtle: rgba(var(--sip-info-rgb), 0.4);
    --bs-success: var(--sip-success);
    --bs-success-rgb: var(--sip-success-rgb);
    --bs-success-text-emphasis: var(--sip-success-text);
    --bs-success-bg-subtle: rgba(var(--sip-success-rgb), 0.12);
    --bs-success-border-subtle: rgba(var(--sip-success-rgb), 0.4);
    --bs-warning: var(--sip-warning);
    --bs-warning-rgb: var(--sip-warning-rgb);
    --bs-warning-text-emphasis: var(--sip-warning-text);
    --bs-warning-bg-subtle: rgba(var(--sip-warning-rgb), 0.1);
    --bs-warning-border-subtle: rgba(var(--sip-warning-rgb), 0.4);
    --bs-danger: var(--sip-danger);
    --bs-danger-rgb: var(--sip-danger-rgb);
    --bs-danger-text-emphasis: var(--sip-danger-text);
    --bs-danger-bg-subtle: rgba(var(--sip-danger-rgb), 0.12);
    --bs-danger-border-subtle: rgba(var(--sip-danger-rgb), 0.4);
    --bs-secondary: var(--sip-text-2);
    --bs-secondary-text-emphasis: var(--sip-text-2);
    --bs-secondary-bg-subtle: rgba(var(--sip-text-rgb), 0.06);
    --bs-secondary-border-subtle: var(--sip-line-strong);
    --bs-light-bg-subtle: var(--sip-card);
    --bs-dark-bg-subtle: var(--sip-canvas);

    /* Focus: the SIP ring, not a blue glow. */
    --bs-focus-ring-width: 2px;
    --bs-focus-ring-opacity: 1;
    --bs-focus-ring-color: var(--sip-text);

    /* Form controls. */
    --bs-form-valid-color: var(--sip-success);
    --bs-form-valid-border-color: var(--sip-success);
    --bs-form-invalid-color: var(--sip-danger);
    --bs-form-invalid-border-color: var(--sip-danger);

    color-scheme: dark;
}

/* The select chevron, drawn in --sip-text-2 so it shows on the dark field. */
.form-select,
select.form-control {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23B4B7BC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Bootstrap's pills and tabs: neutral selection, as everywhere else. */
.nav-pills {
    --bs-nav-pills-link-active-color: var(--sip-text);
    --bs-nav-pills-link-active-bg: rgba(var(--sip-text-rgb), 0.1);
}

.nav {
    --bs-nav-link-color: var(--sip-text-2);
    --bs-nav-link-hover-color: var(--sip-text);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--sip-hairline);
    --bs-nav-tabs-link-hover-border-color: var(--sip-hairline);
    --bs-nav-tabs-link-active-color: var(--sip-text);
    --bs-nav-tabs-link-active-bg: var(--sip-card);
    --bs-nav-tabs-link-active-border-color: var(--sip-hairline) var(--sip-hairline) var(--sip-card);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--sip-card);
    --bs-dropdown-border-color: var(--sip-hairline);
    --bs-dropdown-link-color: var(--sip-text);
    --bs-dropdown-link-hover-bg: var(--sip-raise);
    --bs-dropdown-link-active-color: var(--sip-text);
    --bs-dropdown-link-active-bg: var(--sip-raise);
}

.list-group {
    --bs-list-group-bg: var(--sip-card);
    --bs-list-group-border-color: var(--sip-hairline);
    --bs-list-group-active-color: var(--sip-text);
    --bs-list-group-active-bg: var(--sip-raise);
    --bs-list-group-active-border-color: var(--sip-line-strong);
}

.pagination {
    --bs-pagination-bg: var(--sip-card);
    --bs-pagination-border-color: var(--sip-hairline);
    --bs-pagination-color: var(--sip-text);
    --bs-pagination-hover-bg: var(--sip-raise);
    --bs-pagination-hover-color: var(--sip-text);
    --bs-pagination-focus-box-shadow: var(--focus-ring);
    --bs-pagination-active-bg: var(--sip-raise);
    --bs-pagination-active-border-color: var(--sip-line-strong);
    --bs-pagination-active-color: var(--sip-text);
}

.progress {
    --bs-progress-bg: var(--sip-hairline);
    --bs-progress-bar-bg: var(--sip-text-2);
}