/* ============================================================================
 * tokens.css — the platform's design token layer.
 *
 * Three values are configured per tenant in the dealer settings screen:
 * primary, secondary and accent (each a background + text pair). Everything
 * else in this file is derived from those three, so a tenant gets a coherent
 * palette without having to specify twenty colours.
 *
 * The tenant's own values are emitted by views/partials/global-styles.ejs,
 * which loads AFTER this file and overrides the :root defaults below. The
 * defaults here are REITIUM's, and are what you see if dealer settings are
 * missing or a page renders outside a tenant context.
 *
 * The --bs-* block at the bottom wires these tokens into Bootstrap 5.3's own
 * custom properties, so Bootstrap components inherit tenant branding without
 * any per-component overrides.
 * ==========================================================================*/

:root {
  /* ---- 1. Tenant inputs -------------------------------------------------
   * Overridden per tenant by global-styles.ejs. The -rgb triplets are needed
   * because Bootstrap composes its background utilities as
   * rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)).
   */
  --brand-primary: #0f2a6a;
  --brand-primary-rgb: 15, 42, 106;
  --brand-primary-contrast: #ffffff;

  --brand-secondary: #ffffff;
  --brand-secondary-rgb: 255, 255, 255;
  --brand-secondary-contrast: #000000;

  --brand-accent: #b1972a;
  --brand-accent-rgb: 177, 151, 42;
  --brand-accent-contrast: #ffffff;

  /* ---- 2. Derived brand states -----------------------------------------
   * color-mix keeps hover/active/subtle in step with whatever the tenant
   * configures, instead of a second hardcoded hex that drifts out of sync.
   */
  --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 86%, #000);
  --brand-primary-active: color-mix(in srgb, var(--brand-primary) 74%, #000);
  --brand-primary-subtle: color-mix(in srgb, var(--brand-primary) 8%, #fff);
  --brand-primary-border: color-mix(in srgb, var(--brand-primary) 24%, #fff);
  /* Edge for filled brand surfaces. On a dark primary this is a barely-visible
     darker rim; on a light or white primary it is what keeps the control from
     disappearing into a white page. Both cases need it, so it is applied
     unconditionally rather than behind a lightness test CSS cannot do. */
  --brand-primary-edge: color-mix(in srgb, var(--brand-primary) 82%, #000);
  --brand-accent-edge: color-mix(in srgb, var(--brand-accent) 82%, #000);

  --brand-secondary-hover: color-mix(in srgb, var(--brand-secondary) 92%, #000);
  --brand-secondary-active: color-mix(in srgb, var(--brand-secondary) 84%, #000);

  --brand-accent-hover: color-mix(in srgb, var(--brand-accent) 86%, #000);
  --brand-accent-active: color-mix(in srgb, var(--brand-accent) 74%, #000);
  --brand-accent-subtle: color-mix(in srgb, var(--brand-accent) 12%, #fff);
  --brand-accent-border: color-mix(in srgb, var(--brand-accent) 30%, #fff);

  /* ---- 3. Surfaces ------------------------------------------------------
   * Tinted very slightly toward the tenant's primary so the chrome reads as
   * part of the brand rather than generic grey.
   */
  --surface-page: color-mix(in srgb, var(--brand-primary) 4%, #fff);
  --surface-raised: #ffffff;
  --surface-sunken: color-mix(in srgb, var(--brand-primary) 7%, #fff);
  --surface-overlay: #ffffff;
  --surface-inverse: #1f2430;

  /* ---- 4. Ink ----------------------------------------------------------- */
  --ink: #212529;
  --ink-muted: #5b6472;
  --ink-subtle: #868e96;
  --ink-inverse: #ffffff;
  --ink-link: var(--brand-primary);

  /* ---- 5. Borders ------------------------------------------------------- */
  --border: color-mix(in srgb, var(--brand-primary) 14%, #fff);
  --border-strong: color-mix(in srgb, var(--brand-primary) 28%, #fff);
  --border-input: #ced4da;

  /* ---- 6. Semantic -------------------------------------------------------
   * Deliberately independent of the accent. A tenant whose accent is gold
   * must not end up with gold warnings that read as branding, and a tenant
   * whose accent is red must not have every accent chip read as an error.
   */
  --success: #1d7a51;
  --success-fg: #ffffff;
  --success-subtle: #e6f4ed;
  --success-border: #a7d8c0;

  --warning: #a86b12;
  --warning-fg: #ffffff;
  --warning-subtle: #fdf3e2;
  --warning-border: #f0d0a0;

  --danger: #b3261e;
  --danger-fg: #ffffff;
  --danger-subtle: #fdecea;
  --danger-border: #f2b8b4;

  --info: #1c6280;
  --info-fg: #ffffff;
  --info-subtle: #e7f2f7;
  --info-border: #a9cede;

  /* ---- 7. Spacing — 4pt scale ------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  /* ---- 8. Radius --------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 50rem;
  --radius-circle: 50%;

  /* ---- 9. Elevation ------------------------------------------------------
   * Three steps only. The old stylesheet had box-shadow, box-shadow-shallow
   * and box-shadow-wide used interchangeably on the same page; these map onto
   * a real scale in stack-compat.css.
   */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 2px 8px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.05);
  --shadow-focus: 0 0 0 0.25rem color-mix(in srgb, var(--brand-primary) 25%, transparent);

  /* ---- 10. Typography -----------------------------------------------------
   * One family. The platform previously pulled six across four separate
   * Google Fonts requests, which is why headings did not feel related from
   * one page to the next.
   */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- 11. Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---- 12. Layout --------------------------------------------------------- */
  --sidebar-width: 17.228571em;
  --topbar-height: 64px;

  /* ---- 13. Legacy aliases -------------------------------------------------
   * The pre-token variable names, still referenced ~140 times in custom.css.
   * Defined here (not in custom.css) so there is one source of truth and so
   * they always resolve even on a page that renders without dealer settings.
   * global-styles.ejs re-emits these per tenant. Retire them as each component
   * moves onto the --brand-* names.
   *
   * --btn-primary-bg-hover was previously referenced but never defined for the
   * default tenant, so .btn-primary-bg:hover silently did nothing. It now
   * falls back to the derived hover state.
   */
  --btn-primary-bg: var(--brand-primary);
  --btn-primary-color: var(--brand-primary-contrast);
  --btn-primary-bg-hover: var(--brand-primary-hover);
  --btn-secondary-bg: var(--brand-secondary);
  --btn-secondary-color: var(--brand-secondary-contrast);
  --accent-bg: var(--brand-accent);
  --accent-color: var(--brand-accent-contrast);
}

/* ---------------------------------------------------------------------------
 * IMPORTANT — scope constraint.
 *
 * The derived tokens above (--brand-*-hover, --surface-*, --border, …) are
 * declared on :root, so their var() references resolve against :root's value
 * of --brand-primary. Overriding --brand-primary on a *descendant* element
 * therefore recolours only what reads --brand-primary directly; the derived
 * tokens keep :root's value.
 *
 * That is fine for the app, because global-styles.ejs emits the tenant colours
 * onto :root itself. But if you ever need two palettes on one page — a live
 * preview swatch in the dealer settings screen, for example — redeclare the
 * derived tokens inside that scope too, or render the preview in an iframe.
 * ------------------------------------------------------------------------ */

/* ============================================================================
 * Bootstrap 5.3 bridge.
 *
 * Bootstrap reads its own custom properties at render time, so pointing them
 * at our tokens themes every Bootstrap component at once — buttons, badges,
 * alerts, form controls, tables, pagination — with no per-component override
 * and no !important.
 * ==========================================================================*/
:root {
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-secondary: var(--brand-secondary);
  --bs-secondary-rgb: var(--brand-secondary-rgb);
  --bs-success: var(--success);
  --bs-danger: var(--danger);
  --bs-warning: var(--warning);
  --bs-info: var(--info);

  --bs-body-bg: var(--surface-page);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--text-base);
  --bs-body-line-height: var(--leading-normal);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-muted);
  --bs-tertiary-color: var(--ink-subtle);

  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);

  --bs-link-color: var(--ink-link);
  --bs-link-hover-color: var(--brand-primary-hover);

  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-lg: var(--shadow-lg);

  --bs-font-monospace: var(--font-mono);
}

/* Bootstrap's .btn-primary / .btn-secondary read a per-component variable
 * set rather than the global --bs-primary, so they need wiring explicitly. */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary-edge);
  --bs-btn-color: var(--brand-primary-contrast);
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-edge);
  --bs-btn-hover-color: var(--brand-primary-contrast);
  --bs-btn-active-bg: var(--brand-primary-active);
  --bs-btn-active-border-color: var(--brand-primary-edge);
  --bs-btn-active-color: var(--brand-primary-contrast);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary-edge);
  --bs-btn-disabled-color: var(--brand-primary-contrast);
}

.btn-secondary {
  --bs-btn-bg: var(--brand-secondary);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-color: var(--brand-secondary-contrast);
  --bs-btn-hover-bg: var(--brand-secondary-hover);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--brand-secondary-contrast);
  --bs-btn-active-bg: var(--brand-secondary-active);
  --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-active-color: var(--brand-secondary-contrast);
  --bs-btn-disabled-bg: var(--brand-secondary);
  --bs-btn-disabled-border-color: var(--border-strong);
  --bs-btn-disabled-color: var(--brand-secondary-contrast);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-hover-color: var(--brand-primary-contrast);
  --bs-btn-active-bg: var(--brand-primary-active);
  --bs-btn-active-border-color: var(--brand-primary-active);
  --bs-btn-active-color: var(--brand-primary-contrast);
}

/* ---- Button variants used without .btn ---------------------------------
 * Bootstrap 4's .btn-primary painted background-color directly, so markup like
 *
 *     <a href="…"><div class="btn-primary p-4 border--round">…</div></a>
 *
 * worked as a coloured surface. Bootstrap 5 moved the paint onto the base .btn
 * rule and left the variant classes declaring only --bs-btn-* custom
 * properties, so a variant on its own now renders transparent.
 *
 * Six elements rely on this: the Dealing Rep dashboard's TRADE and CLIENT
 * tiles, two deal card footers, and two KYC tab links. Restoring the direct
 * paint here is scoped with :not(.btn) so real buttons keep Bootstrap's full
 * state machinery (hover, active, focus, disabled) rather than a flat colour.
 */
.btn-primary:not(.btn) {
  background-color: var(--brand-primary);
  color: var(--brand-primary-contrast);
  border: 1px solid var(--brand-primary-edge);
}
.btn-secondary:not(.btn) {
  background-color: var(--brand-secondary);
  color: var(--brand-secondary-contrast);
  border: 1px solid var(--border-strong);
}
.btn-accent:not(.btn) {
  background-color: var(--brand-accent);
  color: var(--brand-accent-contrast);
  border: 1px solid var(--brand-accent-edge);
}

/* An accent button, which the platform had no way to express before. */
.btn-accent {
  --bs-btn-bg: var(--brand-accent);
  --bs-btn-border-color: var(--brand-accent-edge);
  --bs-btn-color: var(--brand-accent-contrast);
  --bs-btn-hover-bg: var(--brand-accent-hover);
  --bs-btn-hover-border-color: var(--brand-accent-hover);
  --bs-btn-hover-color: var(--brand-accent-contrast);
  --bs-btn-active-bg: var(--brand-accent-active);
  --bs-btn-active-border-color: var(--brand-accent-active);
  --bs-btn-active-color: var(--brand-accent-contrast);
}

/* ---- Focus -------------------------------------------------------------
 * A visible focus ring on every interactive element, tinted to the tenant.
 * :focus-visible keeps it off mouse clicks.
 */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: var(--shadow-focus);
  border-color: var(--brand-primary-border);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}