/**
 * Installa design tokens (ticket 0107). The one place a colour, size, radius or shadow is decided.
 * ===================================================================================================
 * Loaded first by layouts/layout and the customer portal; hand-kept, no build step (cache-busted by mtime through
 * App\Support\Assets::versioned()). Shared with the field app (app/installa-app/constants/theme/colors.ts): the same
 * brand blue, the same yellow action with dark text, the same state colours and chip tints, and the same rule that
 * every text-on-colour pair reads at 4.5:1 or better (tests/Unit/Design/ContrastTest.php computes each pair).
 *
 * Three layers, in this order:
 *   1. The tokens themselves (:root) and the choices Joe can flip at review (config/look.php -> <html data-*>).
 *   2. The Falcon / Bootstrap variables (--installa-*) pointed at the tokens, for the app look only
 *      (<html data-look="app">). The admin panel and the full-bleed designer and map screens are data-look="legacy"
 *      and keep the theme's own values.
 *   3. Nothing else: component rules (buttons, cards, chips, the frame) live in fixes.css and read these tokens.
 */

:root {
  /* Brand */
  --brand: #156BA6;
  --brand-strong: #0B4F7E;

  /* Actions. Primary: the one thing to press (brand yellow, dark text). Secondary: green, white text.
     Tertiary: white with a border (fixes.css, "Button roles"). */
  --action: #F5A623;
  --action-hover: #E39412;
  --on-action: #0F172A;
  --action-2: #15803D;
  --action-2-hover: #166534;
  --on-action-2: #FFFFFF;
  /* The next-step bar's tint (ticket 0108): a wash of the action colour behind the one thing to do */
  --action-tint: #FFFBEB;

  /* Surfaces and text */
  --surface-page: #F1F5F9;
  --surface: #FFFFFF;
  --surface-sunken: #F8FAFC;
  --border: #E2E8F0;
  --border-control: #CBD5E1;
  --text: #0F172A;
  --text-muted: #475569;
  --link: #156BA6;
  --link-hover: #0B4F7E;

  /* States: text, icons and borders on white */
  --ok: #15803D;
  --wait: #B45309;
  --bad: #B91C1C;
  --info: #156BA6;

  /* State chips: dark text on a light tint */
  --chip-done-bg: #DCFCE7;     --chip-done: #166534;
  --chip-wait-bg: #FEF3C7;     --chip-wait: #92400E;
  --chip-problem-bg: #FEE2E2;  --chip-problem: #991B1B;
  --chip-info-bg: #E0F2FE;     --chip-info: #0C4A6E;
  --chip-neutral-bg: #E2E8F0;  --chip-neutral: #334155;

  /* The kind of record: panel headers (x-general.panel entity=) and entity rows/cards. White text on each passes.
     resources/scss/user.scss $entity-colors holds the same values (tests/Unit/Design/TokensTest.php keeps them equal). */
  --entity-customer: #1D4ED8;
  --entity-proposal: #6D28D9;
  --entity-task: #BE185D;
  --entity-project: #047857;
  --entity-location: #0E7490;
  --entity-product: #B45309;
  --entity-survey: #0F766E;

  /* A record's tabs (ticket 0114, x-general.tab-panel): a solid band in the job's colour, each tab a darker block on
     it with white text, the open tab white with dark text and fused to the white panel below. The idle and hovered
     blocks are washes over the band, so a band in another kind's colour keeps the same steps (ContrastTest). */
  --tab-band: var(--entity-project);
  --on-tab: #FFFFFF;
  --tab-idle: rgba(0, 0, 0, 0.18);
  --tab-hover: rgba(0, 0, 0, 0.34);
  --tab-active: var(--surface);
  --on-tab-active: var(--text);

  /* The canvas behind content, and what reads directly on it (page titles, breadcrumbs). Joe's choice 2 (7 Oct):
     the blue gradient stays behind content. Joe, 7 Oct (later): the gradient is the one from before ticket 0107, the
     same stops, angle and colours (fixes.css had it as the body background).
     Text on it is white, as before 0107 (Joe's choice, 7 Oct 2026): a deliberate exception to the 4.5:1 rule. White is
     3.25:1 at the light stop and 4.8:1 at the right edge, so canvas and sidebar text is held to 3:1 (WCAG large text and
     UI components) and small canvas text is drawn at 600 weight (fixes.css). Everything on a white surface, a button or
     a chip stays at 4.5:1 (tests/Unit/Design/ContrastTest.php). */
  --canvas: linear-gradient(90deg, #3B82D3 0%, #4791E6 35%, #3172C5 100%);
  --canvas-flat: #459BE2;
  --on-canvas: #FFFFFF;
  --on-canvas-muted: #FFFFFF;
  /* A band straight on the canvas that groups a row of buttons (Home's Start row): a darker wash, so its white label
     reads better than on the canvas itself */
  --canvas-band: rgba(6, 40, 66, 0.18);

  /* The frame: sidebar and top bar. On a desk they sit straight on the canvas, no wash of their own (Joe, 7 Oct): the
     sidebar is see-through and the top bar paints the canvas itself, so it looks the same scrolled or not. The top
     bar's icons are white (an icon needs 3:1, WCAG 1.4.11; white is 3.25:1 at worst); the sidebar's text is white too. */
  --frame-side: transparent;
  --frame-side-overlay: var(--canvas);
  --top-bar: var(--canvas);
  --on-frame: #FFFFFF;
  --frame-label: #FFFFFF;
  --frame-active: rgba(6, 40, 66, 0.25);
  --frame-hover: rgba(6, 40, 66, 0.15);
  --frame-rule: rgba(255, 255, 255, 0.24);
  --on-top-bar: #FFFFFF;
  /* Under 1200px wide the top bar and the menu that drops from it are solid, the blue they were before ticket 0107
     (rgba(40, 90, 145, 0.96), made opaque so nothing shows through when the page scrolls under it) */
  --frame-solid: #285A91;
  --on-frame-solid: #FFFFFF;
  --frame-solid-label: #D6E6F5;
  --frame-solid-active: rgba(255, 255, 255, 0.16);
  /* The scrolled top bar: a hairline under it, nothing else */
  --frame-scrolled-shadow: 0 1px 0 rgba(15, 23, 42, 0.18);

  /* Type. Joe's choice 3 (7 Oct): the computer's own font; no web fonts are loaded. */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --lh: 1.45;
  --lh-tight: 1.2;

  /* Spacing on 4 / 8 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Radii: 4 for controls and chips, 8 for cards and modals */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-pill: 50rem;

  /* Elevation: 0 flat with a border (cards), 1 menus and popovers, 2 modals and the save bar. No hover lift. */
  --elev-0: none;
  --elev-1: 0 4px 12px rgba(15, 23, 42, 0.12);
  --elev-2: 0 12px 32px rgba(15, 23, 42, 0.2);
}

/* ---- Joe's three choices, each one rule (config/look.php sets the attribute) ---------------------------------- */

/* 1. Main action colour: data-action="blue" makes it brand blue with white text. */
:root[data-action="blue"] {
  --action: #156BA6;
  --action-hover: #0B4F7E;
  --on-action: #FFFFFF;
  --action-tint: #EFF6FF;
}

/* 2. Canvas: data-canvas="frame" puts content on light grey, with the blue only on the sidebar and top bar. */
:root[data-canvas="frame"] {
  --canvas: #F1F5F9;
  --canvas-flat: #F1F5F9;
  --on-canvas: #0F172A;
  --on-canvas-muted: #475569;
  --frame-side: #0B4F7E;
  --frame-side-overlay: #0B4F7E;
  --canvas-band: #FFFFFF;
  --top-bar: #156BA6;
  --on-frame: #FFFFFF;
  --frame-label: #B9D6EE;
  --frame-active: rgba(255, 255, 255, 0.16);
  --frame-hover: rgba(255, 255, 255, 0.08);
  --frame-rule: rgba(255, 255, 255, 0.16);
}

/* 3. Font: data-font="inter" uses Inter (the layout then loads it from Google Fonts). */
:root[data-font="inter"] {
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- The theme's variables, read from the tokens (app look only) -------------------------------------------------
   :root:not() outranks the theme's own ":root, [data-bs-theme=light]" block, so this file can load first. */
:root:not([data-look="legacy"]) {
  --installa-primary: var(--brand);
  --installa-primary-rgb: 21, 107, 166;
  --installa-secondary-rgb: 71, 85, 105;
  --installa-success: var(--ok);
  --installa-success-rgb: 21, 128, 61;
  --installa-info: var(--info);
  --installa-info-rgb: 21, 107, 166;
  --installa-warning: var(--wait);
  --installa-warning-rgb: 180, 83, 9;
  --installa-danger: var(--bad);
  --installa-danger-rgb: 185, 28, 28;
  --installa-dark: var(--text);
  --installa-dark-rgb: 15, 23, 42;
  --installa-mid-rgb: 71, 85, 105;

  --installa-primary-text-emphasis: var(--chip-info);
  --installa-secondary-text-emphasis: var(--chip-neutral);
  --installa-success-text-emphasis: var(--chip-done);
  --installa-info-text-emphasis: var(--chip-info);
  --installa-warning-text-emphasis: var(--chip-wait);
  --installa-danger-text-emphasis: var(--chip-problem);
  --installa-primary-bg-subtle: var(--chip-info-bg);
  --installa-secondary-bg-subtle: var(--chip-neutral-bg);
  --installa-success-bg-subtle: var(--chip-done-bg);
  --installa-info-bg-subtle: var(--chip-info-bg);
  --installa-warning-bg-subtle: var(--chip-wait-bg);
  --installa-danger-bg-subtle: var(--chip-problem-bg);
  --installa-primary-border-subtle: var(--border);
  --installa-secondary-border-subtle: var(--border);
  --installa-success-border-subtle: var(--border);
  --installa-info-border-subtle: var(--border);
  --installa-warning-border-subtle: var(--border);
  --installa-danger-border-subtle: var(--border);

  --installa-font-sans-serif: var(--font-ui);
  --installa-font-base: var(--font-ui);
  --installa-body-font-family: var(--font-ui);
  --installa-body-font-size: var(--fs-14);
  --installa-body-line-height: var(--lh);
  --installa-body-color: var(--on-canvas);
  --installa-body-bg: var(--canvas-flat);
  --installa-heading-color: inherit;
  --installa-secondary-color: var(--text-muted);
  --installa-tertiary-color: var(--text-muted);
  --installa-emphasis-color: var(--text);

  --installa-link-color: var(--link);
  --installa-link-color-rgb: 21, 107, 166;
  --installa-link-hover-color: var(--link-hover);
  --installa-link-hover-color-rgb: 11, 79, 126;

  --installa-border-color: var(--border);
  --installa-border-radius: var(--radius-sm);
  --installa-border-radius-sm: var(--radius-sm);
  --installa-border-radius-lg: var(--radius);
  --installa-box-shadow: var(--elev-1);
  --installa-box-shadow-lg: var(--elev-2);

  --installa-form-valid-color: var(--ok);
  --installa-form-valid-border-color: var(--ok);
  --installa-form-invalid-color: var(--bad);
  --installa-form-invalid-border-color: var(--bad);
  --installa-input-focus-border-color-global: var(--brand);

  --installa-bg-navbar-glass: transparent;
}