/* ==========================================================================
   Truo Trade — design tokens
   Primitive and semantic tokens mirrored from the Truo Trade design system
   (TruoBrand · brand-kit/tokens/truo-product.css, v1.1.0), plus the marketing
   scale the website adds on top. The product tokens are authoritative: do not
   redefine a primitive here, only add marketing-layer tokens.
   ========================================================================== */

/* --- Self-hosted brand faces ---------------------------------------------- */

@font-face {
  font-family: "InterVariable";
  src: url("../assets/fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope Variable";
  src: url("../assets/fonts/Manrope-Variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Primitive colour ------------------------------------------------- */
  --truo-blue: #2457c5;
  --truo-blue-dark: #1b439e;
  --truo-blue-tint: #eef3ff;
  --truo-ink: #17191f;
  --truo-ink-hover: #2b2e36;
  --truo-slate: #5c6470;
  --truo-line: #dadde2;
  --truo-mist: #f3f4f6;
  --truo-canvas: #fffdf8;
  --truo-white: #ffffff;
  --truo-info: var(--truo-blue);
  --truo-info-dark: var(--truo-blue-dark);
  --truo-info-tint: var(--truo-blue-tint);
  --truo-clearance: #0f766e;
  --truo-clearance-dark: #0b5c56;
  --truo-clearance-tint: #ecfdf8;
  --truo-warning: #8a4b08;
  --truo-warning-tint: #fff7e8;
  --truo-error: #a62920;
  --truo-error-dark: #812019;
  --truo-error-tint: #fff2f0;

  /* Ink-field derivatives. The dark sections are built from Ink, not from a
     separate dark palette, so the two never drift apart. */
  --truo-ink-surface: #1e2128;
  --truo-ink-surface-raised: #262a33;
  --truo-ink-line: #2f333d;
  --truo-ink-line-strong: #3d424e;
  --truo-ink-text: #f4f5f7;
  --truo-ink-text-muted: #9aa1ad;

  /* --- Primitive spacing and size --------------------------------------- */
  --truo-space-1: 4px;
  --truo-space-2: 8px;
  --truo-space-3: 12px;
  --truo-space-4: 16px;
  --truo-space-5: 20px;
  --truo-space-6: 24px;
  --truo-space-8: 32px;
  --truo-space-10: 40px;
  --truo-space-12: 48px;
  --truo-space-16: 64px;
  --truo-control-compact: 32px;
  --truo-control-default: 40px;
  --truo-control-large: 48px;
  --truo-touch-minimum: 44px;
  --truo-rail-collapsed: 72px;
  --truo-rail-expanded: 240px;
  --truo-context-rail: 360px;

  /* --- Primitive type, shape and motion --------------------------------- */
  --truo-font-display: "Manrope Variable", "Manrope", "InterVariable", "Inter", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --truo-font-body: "InterVariable", "Inter", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --truo-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --truo-text-xs: 12px;
  --truo-text-sm: 14px;
  --truo-text-base: 16px;
  --truo-text-lg: 18px;
  --truo-text-xl: 20px;
  --truo-text-2xl: 24px;
  --truo-text-3xl: 30px;
  --truo-text-4xl: 36px;
  --truo-text-5xl: 48px;
  --truo-text-6xl: 64px;
  --truo-leading-display: 1.1;
  --truo-leading-heading: 1.2;
  --truo-leading-ui: 1.4286;
  --truo-leading-body: 1.5;
  --truo-radius-sm: 4px;
  --truo-radius-control: 8px;
  --truo-radius-panel: 12px;
  --truo-radius-card: 16px;
  --truo-radius-pill: 999px;
  --truo-duration-fast: 150ms;
  --truo-duration-normal: 200ms;
  --truo-duration-slow: 300ms;
  --truo-ease: cubic-bezier(0.2, 0, 0.13, 1);
  --truo-shadow-raised: 0 2px 8px rgb(23 25 31 / 8%);
  --truo-shadow-overlay: 0 12px 32px -8px rgb(23 25 31 / 16%);

  /* --- Semantic tokens --------------------------------------------------- */
  --truo-color-background: var(--truo-canvas);
  --truo-color-surface: var(--truo-white);
  --truo-color-surface-muted: var(--truo-mist);
  --truo-color-text: var(--truo-ink);
  --truo-color-text-muted: var(--truo-slate);
  --truo-color-border: var(--truo-line);
  --truo-color-brand: var(--truo-blue);
  --truo-color-action: var(--truo-ink);
  --truo-color-action-hover: var(--truo-ink-hover);
  --truo-color-focus: var(--truo-info);
  --truo-color-selected: var(--truo-info-tint);
  --truo-color-success: var(--truo-clearance);
  --truo-color-success-surface: var(--truo-clearance-tint);
  --truo-color-warning: var(--truo-warning);
  --truo-color-warning-surface: var(--truo-warning-tint);
  --truo-color-error: var(--truo-error);
  --truo-color-error-surface: var(--truo-error-tint);
  --truo-numeric-variant: tabular-nums lining-nums;
  --truo-identifier-variant: tabular-nums slashed-zero;

  /* --- Layer orientation ------------------------------------------------- */
  --truo-crm-accent: var(--truo-info);
  --truo-crm-surface: var(--truo-info-tint);
  --truo-execution-accent: var(--truo-blue);
  --truo-execution-surface: var(--truo-blue-tint);
  --truo-compliance-accent: var(--truo-clearance);
  --truo-compliance-surface: var(--truo-clearance-tint);

  --truo-focus-ring: 0 0 0 2px var(--truo-color-background), 0 0 0 4px var(--truo-color-focus);

  /* --- Marketing layer ---------------------------------------------------
     The product scale tops out at 64px, which is the floor for a marketing
     hero. These fluid steps extend it without touching product tokens. */
  --site-frame: 1440px;
  --site-content: 1200px;
  --site-reading: 68ch;
  --site-gutter: clamp(20px, 4vw, 48px);

  --site-section-y: clamp(72px, 9vw, 156px);
  --site-section-y-tight: clamp(56px, 6vw, 96px);

  /* Hero 42→72px, H2 34→60px, H3 26→36px — the ranges the website guide sets. */
  --site-text-hero: clamp(2.625rem, 1.55rem + 4.6vw, 4.5rem);
  --site-text-h2: clamp(2.125rem, 1.45rem + 2.9vw, 3.75rem);
  --site-text-h3: clamp(1.625rem, 1.35rem + 1.15vw, 2.25rem);
  --site-text-h4: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
  --site-text-lead: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);
  --site-text-body: clamp(1rem, 0.96rem + 0.16vw, 1.0625rem);

  --site-header-h: 72px;

  /* --- Truo Blue marketing pairs -----------------------------------------
     The website leans on Truo Blue harder than the product shell does, so the
     legible pairs are named once here rather than mixed at each call site.
     Contrast against the surface each one is meant for, WCAG 2.2 AA:

       white on Truo Blue ............... 6.47:1   primary action and brand field
       Truo Blue on Canvas .............. 6.37:1   labels and small blue text
       Truo Blue Dark on Blue Tint ...... 8.07:1   tinted surfaces
       #85a9ff on Ink ................... 7.63:1   blue lifted onto Ink
       #d9e3ff on Truo Blue ............. 5.05:1   muted text on the blue field
       Blue Tint on Truo Blue ........... 5.83:1   lead copy on the blue field */
  --site-blue-field: var(--truo-blue);
  --site-blue-field-text: var(--truo-white);
  --site-blue-field-lead: var(--truo-blue-tint);
  --site-blue-field-muted: #d9e3ff;
  --site-blue-field-line: color-mix(in srgb, var(--truo-white) 24%, transparent);
  --site-blue-field-raised: color-mix(in srgb, var(--truo-white) 10%, transparent);
  --site-blue-on-ink: #85a9ff;
  --site-blue-line: color-mix(in srgb, var(--truo-blue) 38%, transparent);
}

/* Density variants carried over from the product shell. */
[data-density="compact"] { --truo-table-row-height: 40px; }
[data-density="default"] { --truo-table-row-height: 48px; }
[data-density="comfortable"] { --truo-table-row-height: 56px; }

/* Motion is an enhancement everywhere on this site. Honouring the preference
   zeroes the durations at the token level so no component has to opt in. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --truo-duration-fast: 0ms;
    --truo-duration-normal: 0ms;
    --truo-duration-slow: 0ms;
  }
}