/* ============================================================================
   BizBaby design tokens — the single source of truth for the org-side UI.
   Owner-approved 2026-07-06 (see DESIGN-SYSTEM-PLAN.md + the three mockups).

   Rules:
   - Components and pages reference ONLY these names, never raw values.
   - A skin overrides values under [data-bb-skin="..."]; it never adds names.
   - Surface hierarchy: warm page bg -> white container -> NEUTRAL gray insets.
     Insets differ from the page by hue (gray vs cream); cream (--bb-surface-2)
     is a page-level accent only, never a surface inside containers.
   ============================================================================ */

:root {
    /* brand */
    --bb-primary: #DB3A57;
    --bb-primary-hover: #C22F4A;
    --bb-primary-soft: #FFF1F5;
    --bb-row-hover: #FFF1F5; /* OPAQUE table-row hover (never translucent — a legacy white <tr> underneath must not bleed through) */
    --bb-on-primary: #FFFFFF;

    /* surfaces */
    --bb-bg: #FAF7F2;
    --bb-surface: #FFFFFF;
    --bb-inset: #F6F6F6;
    --bb-zebra: #F8F8F8;
    --bb-surface-2: #F7F3EC;
    --bb-select-bg: #F0F0EF;

    /* layout */
    --bb-header-h: 60px; /* fixed top navbar height — the page frame's top offset derives from this (skin-independent) */

    /* text */
    --bb-text: #2B2622;
    --bb-text-2: #6E6660;
    --bb-text-3: #A39B93;

    /* borders */
    --bb-border: #EAE4DC;
    --bb-border-strong: #D9D2C8;
    --bb-border-neutral: #E5E5E5; /* current table/grid line color */
    --bb-border-input: #D2D5DA;   /* current input/select border (cool gray) */

    /* semantic */
    --bb-amber: #B45D08;
    --bb-amber-bg: #FDF0DC;
    --bb-success: #1E7B4D;
    --bb-success-bg: #E6F4EC;
    --bb-success-bright: #2FBF71;
    --bb-danger: #C22F4A;
    --bb-danger-bg: #FFE9EE;
    /* Vivid danger — the twin of --bb-success-bright, for live call controls
       where the muted --bb-danger read as dull next to a vivid green. Same
       hue family as --bb-primary, higher chroma. */
    --bb-danger-bright: #F5384F;
    --bb-info: #2A78D6;
    --bb-info-bg: #F3EEE7;

    /* job/order statuses (absorbed from jobs-flow data-tables vars in Phase 1) */
    --bb-status-approved: #1E7B4D;
    --bb-status-rejected: #C22F4A;
    --bb-status-pending: #B45D08;

    /* categorical CHART series (dataviz) — fixed slot order, assigned in
       sequence, never cycled; identity always carried by a label, never color
       alone. Validated (CVD + contrast) per skin against the card surface;
       the skin overrides values only. Distinct from the status colors above —
       a status color never impersonates a series. */
    --bb-chart-1: #2A78D6;
    --bb-chart-2: #1BAF7A;
    --bb-chart-3: #EDA100;
    --bb-chart-4: #008300;
    --bb-chart-5: #4A3AA7;

    /* radii: controls 5px (current app feel), containers 16px */
    --bb-radius-s: 5px;
    --bb-radius-m: 8px;
    --bb-radius-l: 16px;

    /* spacing steps: 4 8 12 16 24 32 — nothing in between */
    --bb-sp-1: 4px;
    --bb-sp-2: 8px;
    --bb-sp-3: 12px;
    --bb-sp-4: 16px;
    --bb-sp-5: 24px;
    --bb-sp-6: 32px;

    /* ---- typography system ----
       One family token per ROLE (all Rubik today; swapping the app's font
       later = editing these lines). Weight tokens map to the self-hosted
       Rubik faces (300/400/500/600/700/900 — see @font-face in app.css);
       never use a weight that has no face, the browser fakes it. */
    --bb-font: 'Rubik', system-ui, 'Segoe UI', sans-serif;          /* body/UI */
    --bb-font-display: 'Rubik', system-ui, 'Segoe UI', sans-serif;  /* page titles */
    --bb-font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; /* codes, IDs */

    --bb-fw-light: 300;
    --bb-fw-regular: 400;
    --bb-fw-medium: 500;    /* table headers, menu items, subtab active */
    --bb-fw-semibold: 600;  /* buttons, labels, card heads, org name */
    --bb-fw-bold: 700;      /* page titles, chips, big numbers */

    /* type scale */
    --bb-fs-xs: 11px;
    --bb-fs-s: 12.5px;
    --bb-fs-m: 14px;
    --bb-fs-l: 16px;
    --bb-fs-xl: 20px;
    --bb-fs-2xl: 26px;

    --bb-lh-tight: 1.2;   /* headings */
    --bb-lh-body: 1.45;   /* paragraphs, banners */

    /* elevation */
    --bb-shadow-1: 0 1px 4px rgba(60, 45, 30, .06);
    --bb-shadow-2: 0 12px 32px rgba(60, 45, 30, .14);

    /* legacy aliases — existing scss uses var(--red, ...) fallbacks */
    --red: #DB3A57;
    --default-color-red: #DB3A57;
}

/* ============================ ESPRESSO SKIN =============================
   Values only — same names. Applied via <body data-bb-skin="espresso">.  */
[data-bb-skin="espresso"] {
    --bb-primary: #E54763;
    --bb-primary-hover: #DB3A57;
    --bb-primary-soft: rgba(219, 58, 87, .16);
    --bb-row-hover: #3A2528; /* OPAQUE (not the translucent primary-soft) so white legacy rows can't flash pink */
    --bb-bg: #1B1511;
    --bb-surface: #241D17;
    --bb-inset: #2E251D;
    --bb-zebra: #28211A;
    --bb-surface-2: #2E251D;
    --bb-select-bg: #2E251D;
    --bb-text: #F4EDE3;
    --bb-text-2: #B7AC9E;
    --bb-text-3: #847A6D;
    --bb-border: #3A2F25;
    --bb-border-strong: #4A3D30;
    --bb-border-neutral: #3A2F25;
    --bb-border-input: #4A3D30;
    --bb-amber: #F5A93C;
    --bb-amber-bg: rgba(245, 169, 60, .22);
    --bb-success: #5BC98B;
    --bb-success-bg: rgba(91, 201, 139, .20);
    --bb-danger: #FF7A93;
    --bb-danger-bg: rgba(229, 71, 99, .34);
    --bb-info: #3987E5;
    --bb-info-bg: rgba(183, 172, 158, .12);
    --bb-shadow-1: 0 1px 4px rgba(0, 0, 0, .4);
    --bb-shadow-2: 0 12px 32px rgba(0, 0, 0, .5);

    /* --- espresso completions: tokens the first pass left at their light values.
       All reuse the espresso palette declared above (no new colours). --- */
    /* Vivid success used as a SOLID fill under white glyphs (.bb-btn.is-success,
       wizard/getting-started dots, progress bar). Kept at the root vivid green on
       purpose: it pops on the near-black bg and holds white-glyph legibility better
       than the softer --bb-success mint would — declared here so it's reviewed, not
       forgotten. */
    --bb-success-bright: #2FBF71;
    /* Vivid danger on the dark surface: the porcelain #F5384F muddies against
       near-black, so espresso lifts it the same way --bb-danger is lifted. */
    --bb-danger-bright: #FF5C74;
    /* Status aliases track their brightened semantic twins (were dark-on-dark). */
    --bb-status-approved: #5BC98B; /* = --bb-success */
    --bb-status-rejected: #FF7A93; /* = --bb-danger  */
    --bb-status-pending: #F5A93C;  /* = --bb-amber   */
    /* Legacy scss reads var(--red …) / var(--default-color-red …): follow the
       brightened espresso primary so old markup matches the new red. */
    --red: #E54763;
    --default-color-red: #E54763;
    /* Chart series re-stepped for the dark surface (same hues, validated
       against --bb-surface #241D17 — not an automatic flip). */
    --bb-chart-1: #3987E5;
    --bb-chart-2: #199E70;
    --bb-chart-3: #C98500;
    --bb-chart-4: #008300;
    --bb-chart-5: #9085E9;
}