/* ============================================================================
 * Trulioo Portal Kit - design tokens
 * ----------------------------------------------------------------------------
 * A 1:1 reproduction of the Trulioo Portal (labs.trulioo.com) design language,
 * captured from the live site's computed CSS custom properties + fonts +
 * component styles (2026-08). This is the brand token layer every Trulioo portal
 * (KYA, and others) builds on.
 *
 * Two themes: light (default) and dark (`[data-theme="dark"]` or `.theme-dark`).
 * The Trulioo system names tokens semantically (surface / text / action / border
 * / icon) with `invertible` variants; this kit exposes the semantic tokens the
 * components consume, mapped to the exact brand values.
 *
 * Fonts (self-host or CDN via portal-fonts.css):
 *   - Tobias          : editorial serif - headings + the "Trulioo" wordmark (400/500)
 *   - Founders Grotesk: display sans - large marketing type (300/400/500)
 *   - Libre Franklin  : UI/body sans - all app chrome, forms, tables (100-900)
 * ============================================================================ */

:root,
[data-theme="light"],
.theme-light {
  /* ---- brand palette (raw) ---- */
  --tp-dark-green: #172D2D;   /* primary action fill */
  --tp-mid-green: #004C45;    /* primary hover, inverse nav, on-light accents */
  --tp-light-green: #A4DCB4;  /* card/stepper decorative fill */
  --tp-segmented-active: #A7EDC0; /* the exact mint of an ACTIVE segmented item (measured) */
  --tp-card-border: #C8D1D0;  /* the exact border on white content cards (measured) */
  --tp-light-green-20: #E5F0E8; /* nav container, outline hover, subtle green wash */
  --tp-teal: #128BA6;         /* interactive / links */
  --tp-teal-hover: #0E687D;
  --tp-teal-illustration: #67C8D6; /* the login keyhole/clouds panel teal */
  --tp-teal-500: #169794;

  /* ---- surfaces ---- */
  --tp-surface-0: #FFFFFF;    /* cards, raised */
  --tp-surface-1: #F2F2F2;    /* app background */
  --tp-surface-2: #E5E5E5;    /* sunken / hover fills */
  --tp-surface-3: #BFBFBF;
  --tp-surface-background: #F2F2F2;
  --tp-surface-page: #F7F7F7;     /* the warm off-white app page bg (measured on body) */
  --tp-surface-inverse: #121212;
  --tp-nav-default: #FFFFFF;      /* top/side nav on light */
  --tp-nav-inverse: #004C45;      /* dark-green nav variant */
  --tp-nav-container: #E5F0E8;    /* active nav item wash */

  /* ---- text ---- */
  --tp-text-default: #121212;
  --tp-text-subdued: #404040;
  --tp-text-placeholder: #666666;
  --tp-text-disabled: #BFBFBF;
  --tp-text-inverse: #FFFFFF;
  --tp-text-inverse-subdued: #E5E5E5;
  --tp-text-link: #128BA6;

  /* ---- actions ---- */
  --tp-action-primary: #172D2D;
  --tp-action-primary-hover: #004C45;
  --tp-action-primary-text: #FFFFFF;
  --tp-action-primary-disabled: #96A3A1; /* measured on live disabled "Get Started" */
  --tp-action-interactive: #128BA6;
  --tp-action-interactive-hover: #0E687D;
  --tp-action-outline-border: #808080;
  --tp-action-outline-hover-bg: #E5F0E8;
  --tp-action-card: #A4DCB4;
  --tp-action-card-hover: #004C45;

  /* ---- borders ---- */
  --tp-border-default: #808080;   /* input/outlined-control border */
  --tp-border-subdued: #D2D2D2;   /* hairline dividers, card borders */
  --tp-border-focus: #D9F2F7;     /* focus ring wash (legacy cyan; avoid on inputs) */
  --tp-focus-ring-brand: rgba(23, 45, 45, 0.16); /* brand-green input focus ring */

  /* ---- status ---- */
  --tp-success: #27825C;
  --tp-success-bg: #E5F0E8;
  --tp-warning: #DC6803;
  --tp-warning-bg: #FDF6E4;
  --tp-danger: #BB363C;
  --tp-danger-bg: #EDD5D5;
  --tp-info: #128BA6;
  --tp-info-bg: #D3F5F5;

  /* ---- typography ----
   * Verified against the AUTHENTICATED app (labs.trulioo.com/home + /ubo + /deep-search):
   *   - serif   (Tobias)          : editorial hero + section headings + "Trulioo" wordmark.
   *                                 Roman + ITALIC mix is the signature treatment
   *                                 (emphasis words set in italic Tobias).
   *   - display (Founders Grotesk): the app's UI display font - buttons, chips, segmented
   *                                 toggles, card headings, input text, feature titles.
   *   - sans    (Libre Franklin)  : body/label/table text + the login (public) surface.
   *   - warm-dark text `#24302F` (--tp-text-warm) is used on display type alongside #121212. */
  --tp-font-serif: "Tobias", ui-serif, Georgia, "Times New Roman", serif;
  --tp-font-display: "Founders Grotesk", "Libre Franklin", ui-sans-serif, system-ui, sans-serif;
  --tp-font-sans: "Libre Franklin", Roboto, ui-sans-serif, system-ui, sans-serif;
  --tp-font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  --tp-text-warm: #24302F; /* warm dark-green text used on Founders Grotesk UI type */

  /* type scale (rem) - matches the portal's rendered sizes */
  --tp-text-xs: 0.75rem;   /* 12 */
  --tp-text-sm: 0.875rem;  /* 14 - labels, secondary */
  --tp-text-base: 1rem;    /* 16 - body, inputs */
  --tp-text-lg: 1.125rem;  /* 18 - primary button */
  --tp-text-xl: 1.375rem;  /* 22 */
  --tp-text-2xl: 1.75rem;  /* 28 - card headings */
  --tp-text-3xl: 2.5rem;   /* 40 */
  /* Two distinct live hero sizes (measured): the /home editorial hero is 42px,
   * the /selfserve map hero is 62px. Don't collapse them into one. */
  --tp-text-hero: 2.625rem;     /* 42 - /home editorial hero (Tobias) */
  --tp-text-hero-lg: 3.875rem;  /* 62 - /selfserve map hero (Tobias) */
  --tp-leading-tight: 1.1;
  --tp-leading-snug: 1.35;
  --tp-leading-normal: 1.5;

  /* ---- radii ----
   * Verified against the app: buttons are PILLS (100px), inputs are 8px, chips ~16px,
   * segmented-toggle 28px, cards 24px, the decorative framed panel ~24px. */
  --tp-radius-input: 12px;  /* form inputs/selects (KYB form). Home hero card uses 8px. */
  --tp-radius-input-sm: 8px;/* the compact home-card inputs */
  --tp-radius-chip: 16px;   /* tag chips */
  --tp-radius-toggle: 28px; /* segmented toggle */
  --tp-radius-card: 24px;   /* elevated content cards + framed panels + selectable cards */
  --tp-radius-tile: 12px;   /* stat tiles */
  --tp-radius-sm: 6px;
  --tp-radius: 8px;
  --tp-radius-lg: 12px;
  --tp-radius-pill: 100px;  /* ALL buttons (solid + outlined) */

  /* ---- spacing (4px base) ---- */
  --tp-space-1: 4px;
  --tp-space-2: 8px;
  --tp-space-3: 12px;
  --tp-space-4: 16px;
  --tp-space-5: 20px;
  --tp-space-6: 24px;
  --tp-space-8: 32px;
  --tp-space-10: 40px;
  --tp-space-12: 48px;

  /* ---- elevation ---- */
  --tp-shadow-sm: 0 1px 2px rgba(18, 18, 18, 0.06);
  --tp-shadow: 0 4px 16px rgba(18, 18, 18, 0.08);
  --tp-shadow-lg: 0 12px 40px rgba(18, 18, 18, 0.12);

  /* ---- motion (portal uses 0.15s ease-in-out on interactive states) ---- */
  --tp-transition: 0.15s ease-in-out;

  /* ---- decorative surfaces (mint/teal washes measured on the app's framed panel) ---- */
  --tp-wash-mint: #EAF5ED;
  --tp-wash-teal: #ECF9FB;
  --tp-wash-green: #DFE9E8;
  --tp-wash-teal-strong: #CFEEEA;
  /* The right-panel "framed" background: a soft mint gradient the app renders behind the
   * white content card (with a subtle dot-grid overlay). */
  --tp-gradient-teal-panel: linear-gradient(135deg, #E3F7EF 0%, #CFEEEA 100%);
  --tp-gradient-dark: linear-gradient(180deg, #304565 0%, #191D33 100%);
  --tp-illustration-teal: #67C8D6; /* login keyhole/clouds panel */
  /* The reusable "world-map" hero background: a mint->white vertical gradient the
   * selfserve/home renders a dotted world-map SVG over (measured verbatim). */
  --tp-gradient-map: linear-gradient(180deg, #EBF1F0 30.54%, #FFFFFF 47.6%);
  --tp-map-dot: #D2DAD9; /* dot color for the CSS dot-grid map fallback */
  /* "Trulioo Recommended" tag + selected selectable-card */
  --tp-recommend-tag-bg: #172D2D;
  --tp-recommend-tag-text: #FFFFFF;
  --tp-select-card-selected-bg: #EAF5ED;
  --tp-select-card-selected-border: #316E68;
  /* On-mint text is ALWAYS dark (the mint fill is light in both themes). */
  --tp-on-mint: #121212;
  /* Foreground paired with the light-green wash (dropdown-selected, signal chip,
   * active nav icon). Inverts to mint on dark so it stays legible on the dark wash. */
  --tp-accent-wash-fg: #004C45;
}

/* ============================================================================
 * DARK THEME
 * The Trulioo tokens are designed "invertible": surfaces invert to near-black,
 * text to near-white, the mid/light greens + teal stay as the accent family
 * (they read well on dark), and the dark-green primary lifts to mid-green so it
 * stays legible on a dark surface.
 * ============================================================================ */
[data-theme="dark"],
.theme-dark {
  --tp-surface-0: #1B1B1D;
  --tp-surface-1: #121212;
  --tp-surface-2: #242426;
  --tp-surface-3: #363638;
  --tp-surface-background: #121212;
  --tp-surface-page: #0E100F;     /* dark app page bg; rail lifts above it */
  --tp-surface-inverse: #FFFFFF;
  --tp-nav-default: #1B1B1D;
  --tp-nav-inverse: #004C45;
  --tp-nav-container: #16302B;   /* dark wash of the light-green nav container */
  --tp-segmented-active: #A7EDC0; /* mint reads on dark too */
  --tp-card-border: #363638;

  --tp-text-default: #F2F2F2;
  --tp-text-subdued: #BFBFBF;
  --tp-text-placeholder: #808080;
  --tp-text-disabled: #545456;
  --tp-text-inverse: #121212;
  --tp-text-inverse-subdued: #404040;
  --tp-text-link: #61DCDA;        /* teal_200 - the on-dark interactive */
  --tp-text-warm: #F2F2F2;        /* warm dark-green text lifts to near-white on dark */

  --tp-action-primary: #A4DCB4;   /* light-green fill on dark reads as the primary */
  --tp-action-primary-hover: #C4E6CE;
  --tp-action-primary-text: #121212;
  --tp-action-primary-disabled: #545456;
  --tp-action-interactive: #61DCDA;
  --tp-action-interactive-hover: #B1F0F0;
  --tp-action-outline-border: #666666;
  --tp-action-outline-hover-bg: #242426;
  --tp-action-card: #004C45;
  --tp-action-card-hover: #A4DCB4;

  --tp-border-default: #666666;
  --tp-border-subdued: #363638;
  --tp-border-focus: #085252;
  --tp-focus-ring-brand: rgba(164, 220, 180, 0.22); /* mint focus ring on dark */

  --tp-success: #71C4A1;
  --tp-success-bg: #172D2D;
  --tp-warning: #FDB022;
  --tp-warning-bg: #2A2410;
  --tp-danger: #F38C8C;
  --tp-danger-bg: #2A1616;
  --tp-info: #61DCDA;
  --tp-info-bg: #0B2A2A;

  --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --tp-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  --tp-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);

  --tp-gradient-teal-panel: linear-gradient(180deg, #103733 0%, #0B2422 100%);
  /* Map hero themes too: a near-black vertical wash so near-white hero text reads. */
  --tp-gradient-map: linear-gradient(180deg, #18201F 30.54%, #121212 47.6%);
  --tp-map-dot: #2C3A38;

  /* Dark-theme selection surfaces: the light mint wash would strand near-white text,
   * so the selected/wash surfaces go to a dark-green tint and their foregrounds lift. */
  --tp-select-card-selected-bg: #16302B;   /* dark wash of the mint tint */
  --tp-select-card-selected-border: #71C4A1;
  --tp-recommend-tag-bg: #A4DCB4;           /* mint tag on dark */
  --tp-recommend-tag-text: #121212;
  --tp-on-mint: #121212;                    /* mint fill stays light -> dark text */
  --tp-accent-wash-fg: #A4DCB4;             /* on the dark wash, lift to mint */
  --tp-wash-green: #16302B;                 /* chip bg dark-wash so warm text reads */
}

/* Follow the OS when no explicit theme is set (portal HEAD standard: no toggle,
 * theme always follows prefers-color-scheme). A portal MAY still force a theme by
 * setting data-theme on <html>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.theme-light) {
    color-scheme: dark;
  }
}