/**
 * 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;

  /* 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. Its lightest stop keeps white text at 4.5:1. */
  --canvas: linear-gradient(160deg, #0B4F7E 0%, #156BA6 55%, #1A73B5 100%);
  --canvas-flat: #156BA6;
  --on-canvas: #FFFFFF;
  --on-canvas-muted: #EEF5FB;

  /* The frame: sidebar and top bar */
  --frame-side: rgba(6, 40, 66, 0.55);
  --frame-top: rgba(6, 40, 66, 0.35);
  --frame-solid: #0B4F7E;
  --on-frame: #FFFFFF;
  --on-frame-muted: #E6F0F8;
  --frame-label: #B9D6EE;
  --frame-active: rgba(255, 255, 255, 0.16);

  /* 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-top: #156BA6;
}

/* 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;
}