/* Loan Lounge design tokens for the GTM dashboard (tenant "loanlounge").
   Spec: loanlounge/design/DESIGN-SYSTEM.md. Evidence: loanlounge/design/BRAND-EVIDENCE.md.
   Destination: gtm/static/tenants/loanlounge/tokens.css. Fonts: gtm/static/tenants/loanlounge/fonts/ (OFL, self-hosted).

   Every name in the app's contract (gtm/static/tenants/default/tokens.css) is defined below with Loan Lounge values,
   in the same order. Additions follow in their own section; DESIGN-SYSTEM.md section 2.2 lists each with its role.
   Names starting --ll- are this tenant's private palette: referenced only inside this file.

   Block order is deliberate. gtm/tenant.py read_tokens() keeps the LAST definition of each name anywhere in the file
   and checks the contrast-pair colour roles as literal #RRGGBB. So the dark theme and the brand-surface scope come
   BEFORE the light :root block, and the loader checks the light values, which are the default rendering. The cascade
   is unaffected: the dark selector has higher specificity than the light block, and the brand scope applies to
   descendant elements. Comments here never contain a declaration pattern, because the loader would read it. */

/* ---- fonts: OFL faces, self-hosted (CSP: same origin only); files listed in DESIGN-SYSTEM.md section 3.3 ---- */
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 300;
  font-display: optional;
  src: url("fonts/ibm-plex-serif-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("fonts/rubik-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("fonts/rubik-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("fonts/dm-mono-latin-500-normal.woff2") format("woff2");
}

/* ---- dark theme: opt-in with data-theme="dark" on <html>, set by the server (no script). Colour roles only. ---- */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* contract */
  --color-bg: #0D1C35;
  --color-surface: #12284B;
  --color-text: #F5DAE0;
  --color-text-muted: #92B8FF;
  --color-border: var(--ll-navy-pink-25);
  --color-border-control: var(--ll-pink);
  --color-link: #F5DAE0;
  --color-accent: #F5DAE0;
  --color-on-accent: #12284B;
  --color-accent-soft: #344361;
  --color-focus: var(--ll-pink);
  --color-sidebar: #0F2240;
  --color-sidebar-text: #F5DAE0;
  --color-success: #84BC8F;
  --color-success-bg: #112A37;
  --color-warning: #FF681D;
  --color-danger: #BF979F;
  --color-chart-bar: var(--ll-pink);
  --color-chart-axis: var(--ll-blue);

  /* additions */
  --color-surface-raised: var(--ll-navy-raised);
  --color-surface-sunken: var(--ll-navy-ink);
  --color-surface-hover: var(--ll-navy-raised);
  --color-accent-pressed: var(--ll-pink-logo);
  --color-border-strong: var(--ll-pink);
  --color-sidebar-muted: var(--ll-blue);
  --color-on-success: var(--ll-navy);
  --color-warning-bg: var(--ll-orange-dark-tint);
  --color-danger-bg: var(--ll-purple-dark-tint);
  --color-on-danger: var(--ll-navy);
  --color-info-bg: var(--ll-blue-dark-tint);
  --color-info-border: var(--ll-blue);
  --color-hot: var(--ll-orange);
  --color-warm: var(--ll-pink);
  --color-cold: var(--ll-blue);
  --color-on-temp: var(--ll-navy);
  --color-chart-2: var(--ll-purple-light);
  --color-chart-3: var(--ll-green-light);
  --color-chart-4: var(--ll-orange);
  --color-chart-5: var(--ll-blue);
  --color-chart-grid: var(--ll-navy-pink-25);
}

/* ---- brand surface: navy block with pink text (sidebar, mobile top bar, sign-in page).
   Remaps the role names for everything inside it, so the same component rules serve navy blocks. ---- */
[data-surface="brand"] {
  --color-bg: var(--color-sidebar);
  --color-surface: var(--color-sidebar);
  --color-surface-hover: var(--color-sidebar);
  --color-text: var(--color-sidebar-text);
  --color-text-muted: var(--color-sidebar-muted);
  --color-link: var(--color-sidebar-text);
  --color-accent: var(--color-sidebar-text);
  --color-on-accent: var(--color-sidebar);
  --color-accent-pressed: var(--ll-pink-logo);
  --color-border: var(--ll-navy-pink-25);
  --color-border-strong: var(--color-sidebar-text);
  --color-border-control: var(--color-sidebar-text);
  --color-focus: var(--color-sidebar-text);
}

/* ---- light theme (default) and every non-colour token ---- */
:root {
  color-scheme: light;

  /* private palette: the only raw colours in the system; origin of each in DESIGN-SYSTEM.md section 3.1 */
  --ll-navy: #12284B;
  --ll-navy-ink: #0D1C35;
  --ll-navy-deep: #0F2240;
  --ll-navy-raised: #2A3E5D;
  --ll-navy-80: #41536F;
  --ll-navy-tint-6: #F1F2F4;
  --ll-navy-tint-12: #E3E5E9;
  --ll-navy-tint-25: #C4C9D2;
  --ll-navy-pink-15: #344361;
  --ll-navy-pink-25: #4B5570;
  --ll-pink: #F5DAE0;
  --ll-pink-logo: #FAECEF;
  --ll-white: #FFFFFF;
  --ll-blue: #92B8FF;
  --ll-blue-text: #5D76A3;
  --ll-light-blue: #E6FFFF;
  --ll-blue-dark-tint: #1D2F4D;
  --ll-purple: #7E2E3E;
  --ll-purple-light: #BF979F;
  --ll-purple-tint: #F2EAEC;
  --ll-purple-dark-tint: #3A2339;
  --ll-green-text: #246831;
  --ll-green-light: #84BC8F;
  --ll-green-tint: #EBF4EC;
  --ll-green-dark-tint: #112A37;
  --ll-orange: #FF681D;
  --ll-orange-text: #B34914;
  --ll-orange-tint: #FFF0E8;
  --ll-orange-dark-tint: #2A2532;

  /* private type scale: ratio 1.2 from a 14px base, whole px, in rem (root stays 16px); read only by role tokens */
  --ll-text-xs: 0.75rem;
  --ll-text-sm: 0.875rem;
  --ll-text-md: 1.0625rem;
  --ll-text-lg: 1.25rem;
  --ll-text-xl: 1.5rem;
  --ll-text-2xl: 1.8125rem;
  --ll-text-3xl: 2.1875rem;

  /* ===== contract (same names and order as tenants/default/tokens.css) ===== */

  /* colour: surfaces and text. Contrast-checked roles are literal hex equal to the palette entry named in the spec. */
  --color-bg: #FAECEF;
  --color-surface: #FFFFFF;
  --color-text: #12284B;
  --color-text-muted: #41536F;
  --color-border: var(--ll-navy-tint-25);
  --color-border-control: var(--ll-navy);
  --color-link: #12284B;
  --color-accent: #12284B;
  --color-on-accent: #F5DAE0;
  --color-accent-soft: #F5DAE0;
  --color-focus: var(--ll-navy);
  --color-sidebar: #12284B;
  --color-sidebar-text: #F5DAE0;
  /* colour: states */
  --color-success: #246831;
  --color-success-bg: #EBF4EC;
  --color-warning: #B34914;
  --color-danger: #7E2E3E;
  /* colour: data (chart series 1 and axis) */
  --color-chart-bar: var(--ll-navy);
  --color-chart-axis: var(--ll-navy-80);

  /* type */
  --font-sans: "Rubik", system-ui, "Segoe UI", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, Consolas, "Courier New", monospace;
  --text-figure-size: clamp(1.8125rem, 1.642rem + 0.682vw, 2.1875rem);
  --text-title-size: clamp(1.5rem, 1.358rem + 0.568vw, 1.8125rem);
  --text-heading-size: var(--ll-text-md);
  --text-body-size: var(--ll-text-sm);
  --text-secondary-size: var(--ll-text-xs);
  --text-label-size: var(--ll-text-xs);
  --lh-tight: 1.15;
  --lh-body: 1.4;
  --lh-badge: 20px;
  --weight-regular: 400;
  --weight-semibold: 500;
  --tracking-label: 0.1em;
  --tracking-mark: var(--tracking-label);

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

  /* shape: square corners, heavy rules, no shadow */
  --radius-control: 0;
  --radius-card: 0;
  --radius-pill: 0;
  --border-width: 1px;
  --border-width-strong: 3px;
  --border-width-indicator: 11px;
  --focus-width: 3px;
  --focus-offset: 2px;
  --shadow-card: none;

  /* sizes */
  --control-h: 40px;
  --control-h-sm: 32px;
  --sidebar-w: 232px;
  --container-max: 1248px;
  --panel-signin: 420px;
  --kpi-min: 160px;
  --facts-label-min: 120px;
  --field-min: 160px;
  --table-min-w: 720px;
  --measure: 66ch;
  --brand-mark-size: 36px;
  --logo-h: 48px;
  --logo-max-w: 200px;
  --chart-h: 180px;

  /* ===== additions (DESIGN-SYSTEM.md section 2.2): roles the contract lacks ===== */

  /* colour: surfaces, lines, brand surface */
  --color-surface-raised: var(--color-surface);
  --color-surface-sunken: var(--ll-navy-tint-6);
  --color-surface-hover: var(--ll-navy-tint-12);
  --color-accent-pressed: var(--ll-navy-ink);
  --color-border-strong: var(--ll-navy);
  --color-sidebar-muted: var(--ll-blue);
  /* colour: state families completed */
  --color-on-success: var(--ll-pink);
  --color-warning-bg: var(--ll-orange-tint);
  --color-danger-bg: var(--ll-purple-tint);
  --color-on-danger: var(--ll-pink);
  --color-info-bg: var(--ll-light-blue);
  --color-info-border: var(--ll-blue-text);
  /* colour: lead temperature (Prospects heat badges); the same fills and text in both themes */
  --color-hot: var(--ll-orange);
  --color-warm: var(--ll-pink);
  --color-cold: var(--ll-blue);
  --color-on-temp: var(--ll-navy);
  --color-on-hot: var(--color-on-temp);
  --color-on-warm: var(--color-on-temp);
  --color-on-cold: var(--color-on-temp);
  --color-hot-edge: var(--color-on-temp);
  --color-warm-edge: var(--color-on-temp);
  --color-cold-edge: var(--color-on-temp);
  /* colour: chart series 2 to 5 and gridlines; 2, 3, 4 are First Home Buyers, Self-Employed, SMSF if grouped by loan type */
  --color-chart-2: var(--ll-purple);
  --color-chart-3: var(--ll-green-text);
  --color-chart-4: var(--ll-orange-text);
  --color-chart-5: var(--ll-blue-text);
  --color-chart-grid: var(--ll-navy-tint-25);

  /* type */
  --font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --text-state-title-size: var(--ll-text-lg);
  --text-display-size: var(--ll-text-3xl);
  --weight-light: 300;
  --figure-numeric: tabular-nums lining-nums;

  /* space */
  --space-12: 48px;
  --space-16: 64px;

  /* shape */
  --radius-round: 50%;
  --border-width-chip: 2px;
  --border-width-bracket: 7px;
  --border-style-disabled: dashed;
  --underline-thickness: 1px;
  --underline-offset: 4px;
  --underline-thickness-cta: 3px;
  --underline-offset-cta: 7px;

  /* motion */
  --motion-fast: 150ms;
  --motion-standard: 300ms;
  --motion-slow: 400ms;
  --motion-loop: 1600ms;
  --ease-standard: ease;
  --ease-in-out: ease-in-out;
  --ease-enter: ease-in;
  --skeleton-dim: 0.6;

  /* z-layers */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-tooltip: 60;

  /* breakpoints: documentation only; @media cannot read custom properties, so app.css repeats these numbers */
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* sizes */
  --control-h-touch: 44px;
  --check-size: 20px;
  --dot-size: 8px;
  --topbar-h: 64px;
  --chart-h-lg: 240px;
  --logo-h-compact: 40px;
  --logo-signin-w: 240px;
  --bricks-w: 240px;
}

/* ===== shared-stylesheet union (theming pass, 2026-10-27): names app.css reads for every tenant =====
   One app.css serves every tenant, so each name it reads is defined in every tokens file. The values below implement
   DESIGN-SYSTEM.md section 5 for Loan Lounge using only the palette above and the roles already defined.

   Roles derived from other colour roles are declared on :root AND on [data-surface="brand"], so they resolve again
   inside the navy brand surface (sidebar, sign-in) against that scope's remapped roles: there the primary button is a
   pink fill, the secondary fills pink on hover, and headings are pink. */
:root, [data-surface="brand"] {
  --color-heading: var(--color-text);
  --color-strong: var(--color-accent);
  --color-on-strong: var(--color-on-accent);
  /* buttons: the default .btn is the site's outline .button-primary; the primary rests filled and returns to the outline */
  --color-btn-bg: transparent;
  --color-primary-hover-bg: transparent;
  --color-primary-hover-text: var(--color-text);
  --color-primary-hover-border: var(--color-border-strong);
  --color-ghost-hover-bg: var(--color-surface-hover);
  --color-danger-hover-bg: var(--color-danger);
  --color-danger-hover-text: var(--color-on-danger);
  --color-disabled-bg: transparent;
  --color-disabled-border: var(--color-text-muted);
  /* forms: an underline control, no box */
  --color-field-label: var(--color-text-muted);
  --color-input-hover-bg: var(--color-surface-hover);
  --color-input-hover-border: var(--color-border-control);
  /* panels and tables: 3px navy rules */
  --color-card-rule: var(--color-border-strong);
  --color-th-text: var(--color-text);
  --color-th-bg: var(--color-surface);
  --color-th-rule: var(--color-border-strong);
  --color-kpi-headline-bg: var(--color-surface);
  --color-kpi-headline-edge: var(--color-border);
  --color-kpi-headline-rule: var(--color-card-rule);
  --color-kpi-headline-text: var(--color-text-muted);
  --color-kpi-headline-figure: var(--color-heading);
  --color-feed-hover-bg: transparent;
  --color-empty-bg: transparent;
  /* badges */
  --color-badge-bg: transparent;
  --color-icp-bg: var(--color-success);
  --color-on-icp: var(--color-on-success);
  --color-info-badge-edge: var(--color-info-border);
  --color-conf-medium-bg: transparent;
  --color-conf-medium-edge: var(--color-border-strong);
  --color-conf-low-edge: var(--color-text-muted);
  --color-sample-bg: transparent;
  /* tabs: muted uppercase labels, the current one underlined with a 3px rule */
  --color-tab-text: var(--color-text-muted);
  --color-tab-hover-bg: transparent;
  --color-tab-current-bg: transparent;
  --color-tab-current-text: var(--color-text);
  --color-tab-current-rule: var(--color-border-strong);
  --color-chart-bar-hover: var(--color-chart-bar);
  /* navigation (always on the navy brand surface): pink text; the current item is a pink block with navy text */
  --color-nav-hover-bg: transparent;
  --color-nav-hover-indicator: var(--color-sidebar-text);
  --color-nav-current-bg: var(--color-sidebar-text);
  --color-nav-current-text: var(--color-sidebar);
  --color-nav-current-indicator: var(--color-sidebar-text);
  --color-nav-active-bg: var(--ll-pink-logo);
  --color-nav-active-text: var(--color-sidebar);
  --color-menu-hover-bg: transparent;
  --color-menu-hover-text: var(--color-sidebar-text);
  --color-signout-border: var(--color-sidebar-text);
}

/* Set on :root only, so a callout inside the brand surface keeps the page's navy text on its light fill. */
:root {
  --color-callout-text: var(--color-text);
  --color-info-title: var(--color-text);

  /* type: DM Mono for labels and headings, the display serif for titles and figures; buttons, badges, tabs and field
     labels are uppercase with the site's 0.1em tracking */
  --font-heading: var(--font-mono);
  --font-label: var(--font-mono);
  --weight-medium: 500;
  --weight-display: var(--weight-light);
  --weight-nav: var(--weight-regular);
  --weight-state-title: var(--weight-light);
  --ui-text-transform: uppercase;
  --ui-tracking: var(--tracking-label);
  /* copy is typed in sentence case (section 8): titles keep it; buttons and tabs take the uppercase above */
  --heading-text-transform: none;
  --control-text-transform: var(--ui-text-transform);
  /* DM Mono ships at 500 only, so mono text (labels, code) never asks for 400; 12px and 14px text sits on 1.4
     (section 9 rule 10), labels and buttons included */
  --weight-mono: var(--weight-medium);
  --lh-label: var(--lh-body);
  --lh-btn: var(--lh-body);
  --text-btn-small-size: var(--text-label-size);
  --text-field-label-size: var(--text-label-size);
  --text-callout-title-size: var(--text-label-size);
  --text-signin-title-size: var(--text-display-size);
  --link-standalone-decoration: underline;
  --ghost-decoration: underline;
  --nav-hover-decoration: underline;
  --menu-hover-decoration: underline;

  /* controls: 40px at every width (nav and Menu 44px below the sidebar breakpoint), 3px borders */
  --control-h-base: var(--control-h);
  --control-h-sm-base: var(--control-h-sm);
  --btn-border-width: var(--border-width-strong);
  --btn-pad-x: var(--space-6);
  --input-border-width: 0;
  --input-underline-width: var(--border-width-strong);
  --input-pad-x: var(--space-2);
  --nav-indicator-width: var(--border-width-strong);
  --focus-offset-inset: var(--focus-offset);
  /* WCAG 2.5.8: the smallest box of a link that sits beside another link (a page path and its "all fixes") */
  --target-min: var(--space-6);
  /* the narrowest a wrapping name (Overview top companies) gets beside its count, so it never shrinks to a few letters */
  --title-min-w: 10ch;
  /* narrow filter bar: one field per row and buttons at their own width. Section 7 asks for two fields to a row
     while section 5.8 sizes each field by --field-min; kept at one per row and recorded as a spec conflict. */
  --field-pair-basis: 100%;
  --filter-btn-grow: 0;

  /* panels, page header, sections */
  --card-rule-width: var(--border-width-strong);
  --card-pad-md: var(--space-6);
  --page-head-rule-width: var(--border-width-strong);
  --page-head-rule-gap: var(--space-4);
  --section-gap: var(--space-6);
  --feed-item-pad-y: var(--space-3);
  --feed-item-pad-x: 0;
  --empty-pad-y: var(--space-8);
  --empty-pad-x: 0;
  --tab-rule-width: var(--border-width-strong);
  --th-rule-width: var(--border-width-strong);
  --tab-bar-rule-width: var(--border-width);
  --feed-indicator-width: 0;
  /* tables (section 5.5): the header sticks to the top of its scrolling wrapper; below 1024px the first column
     sticks too, with a hairline edge, and a muted line says the table scrolls sideways */
  --z-th: var(--z-raised);
  --first-col-left: 0;
  --first-col-rule-width: var(--border-width);
  /* below 768px the sticky column is capped near half of a 400px card (long names and domains wrap inside it); its
     cells cast the card's surface over the card's left padding (the wider, 768px+ padding; clipped where narrower),
     so scrolled cells never show in the strip beside it */
  --first-col-w-sm: 20ch;
  --first-col-wrap-sm: anywhere;
  --shadow-first-col-cover: calc(-1 * var(--card-pad-md)) 0 0 var(--color-surface);
  --scroll-hint-display: block;
  /* chart lines are told apart by colour, legend and direct labels (no dash patterns) */
  --chart-dash-2: none;
  --chart-dash-3: none;
  --chart-dash-4: none;
  --chart-dash-5: none;

  /* shell: gutters 16 / 24 / 32px; a sticky navy top bar until 1024px, then the 232px column */
  --main-pad-md: var(--space-6);
  --main-pad-lg: var(--space-8);
  --main-pad-xl: var(--space-8);
  --sidebar-pad-x: var(--space-4);
  --sidebar-rule-width: 0;
  /* 8px above and below the 44px Menu button, so the 64px --topbar-h (section 5.1) sets the bar's height */
  --topbar-pad-y: var(--space-2);
  --topbar-position: sticky;

  /* sign-in: the navy page itself is the panel; an 11px pink rule under the logo */
  --signin-border-width: 0;
  --signin-pad-md-y: var(--space-12);
  --signin-pad-md-x: var(--space-6);
  --signin-rule-width: var(--border-width-indicator);
  --signin-rule-gap: var(--space-6);

  /* layout (read by the server, see app.css): nav column from 1024px, paired panels side by side from 1280px */
  --layout-sidebar-from: 1024px;
  --layout-split-from: 1280px;
  --overview-columns-xl: repeat(2, minmax(0, 1fr));
  --overview-areas-xl: "companies pages" "feed feed";
}

/* reduced motion: every duration becomes instant and the skeleton stops pulsing */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-standard: 0ms;
    --motion-slow: 0ms;
    --motion-loop: 0ms;
    --skeleton-dim: 1;
  }
}