/*
 * Tyler dashboard kit design tokens.
 *
 * Layer 1, --tyler-*: brand colors as published on tylertech.com (TylerSkin skin.css named
 *   utility classes). Never re-themed; reference them only from the semantic layer.
 * Layer 2, --tdk-*: semantic roles that components use. Light values live on :root and
 *   dark values on [data-theme="dark"] (plus the OS preference when no theme is stamped).
 *
 * Chart, severity and ramp values were validated with the dataviz palette validator
 * (OKLab CVD separation, lightness band, chroma floor, contrast) against the surfaces below.
 * Re-run it if you change any of them; see README "Changing the palette".
 */

:root {
  /* ---- Brand: Tyler Technologies ---- */
  --tyler-blue: #1078c0;
  --tyler-blue-hover: #4093cd;
  --tyler-blue-dark: #045590;
  --tyler-navy: #40528f;
  --tyler-aqua-dark: #2f9fc0;
  --tyler-aqua-medium: #6bb5c0;
  --tyler-aqua-light: #a6d2d9;
  --tyler-teal-dark: #0e919e;
  --tyler-green-dark: #949932;
  --tyler-green-medium: #a4ac51;
  --tyler-green-light: #cede71;
  --tyler-yellow: #fdc302;
  --tyler-almost-black: #3c3f46;
  --tyler-charcoal: #30333a;
  --tyler-gray-text: #61616b;
  --tyler-gray-dark: #75777e;
  --tyler-gray-medium: #8a929b;
  --tyler-gray-border: #d1d2da;
  --tyler-gray-light: #f3f3f8;
  --tyler-white: #ffffff;

  /* Brand name gradient (TdkBrandText), from the Tyler logo: navy blue to a darker logo green,
   * since the logo's own green (#8f9b49) is under 3:1 on white. */
  --tdk-brand-blue: var(--tyler-navy);
  --tdk-brand-green: #6f7a35;
  --tdk-brand-hi: rgb(255 255 255 / 0.7);
  --tdk-brand-glow: rgb(143 155 73 / 0.35);

  /* ---- Typography ----
   * Amplitude (headings) and Trade Gothic (body) are Tyler's licensed brand faces. They are
   * not bundled; drop licensed files in and declare @font-face (README "Brand fonts").
   * Until then the system sans stack renders. Figures always use the body sans. */
  --tdk-font-heading:
    'Amplitude', 'Trade Gothic Next', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --tdk-font-body:
    'TradeGothic', 'Trade Gothic Next', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --tdk-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --tdk-text-xs: 0.75rem;
  --tdk-text-sm: 0.875rem;
  --tdk-text-md: 1rem;
  --tdk-text-lg: 1.125rem;
  --tdk-text-xl: 1.375rem;
  --tdk-text-2xl: 1.75rem;
  --tdk-text-3xl: 2.25rem;
  --tdk-text-hero: 3rem;
  --tdk-weight-regular: 400;
  --tdk-weight-medium: 500;
  --tdk-weight-semibold: 600;
  --tdk-weight-bold: 700;
  --tdk-leading-tight: 1.2;
  --tdk-leading-normal: 1.5;

  /* ---- Space, shape, depth ---- */
  --tdk-space-1: 0.25rem;
  --tdk-space-2: 0.5rem;
  --tdk-space-3: 0.75rem;
  --tdk-space-4: 1rem;
  --tdk-space-5: 1.25rem;
  --tdk-space-6: 1.5rem;
  --tdk-space-8: 2rem;
  --tdk-space-10: 2.5rem;
  --tdk-space-12: 3rem;
  --tdk-radius-sm: 4px;
  --tdk-radius-md: 8px;
  --tdk-radius-lg: 12px;
  --tdk-radius-pill: 999px;
  --tdk-shadow-sm: 0 1px 2px rgb(48 51 58 / 0.06), 0 1px 3px rgb(48 51 58 / 0.08);
  --tdk-shadow-md: 0 4px 12px rgb(48 51 58 / 0.1);
  --tdk-shadow-lg: 0 12px 32px rgb(48 51 58 / 0.16);
  --tdk-z-header: 30;
  --tdk-z-sidebar: 20;
  --tdk-z-overlay: 40;
  --tdk-z-tooltip: 50;
  --tdk-z-toast: 70;
  --tdk-transition: 150ms ease;

  /* ---- Motion ----
   * Durations and easing for entrances, exits and overlays (motion.css, TdkTransition).
   * Things arrive on ease-out and leave on ease-in, faster than they came. Reduced motion
   * turns every animation and transition off (base.css), so never put meaning in motion. */
  --tdk-duration-fast: 120ms;
  --tdk-duration-base: 200ms;
  --tdk-duration-slow: 320ms;
  --tdk-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --tdk-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --tdk-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --tdk-rise: 8px;
  --tdk-header-height: 60px;
  --tdk-sidebar-width: 248px;
  --tdk-sidebar-width-collapsed: 64px;
  --tdk-content-max: 1600px;

  /* ---- Semantic colors: light ---- */
  color-scheme: light;
  /* A muted, neutral page gray (Tyler light gray is a touch bright behind white cards). */
  --tdk-color-bg: #eef0f2;
  --tdk-color-surface: #ffffff;
  --tdk-color-surface-alt: #f8f8fb;
  --tdk-color-surface-sunken: #ececf2;
  --tdk-color-text: var(--tyler-charcoal);
  --tdk-color-heading: var(--tyler-almost-black);
  --tdk-color-text-secondary: var(--tyler-gray-text);
  /* 4.5:1 or better on the page, surfaces and soft fills, for small print. */
  --tdk-color-text-muted: #5c5e66;
  --tdk-color-border: var(--tyler-gray-border);
  --tdk-color-border-subtle: #e6e7ee;
  --tdk-color-primary: var(--tyler-blue);
  --tdk-color-primary-hover: var(--tyler-blue-dark);
  --tdk-color-primary-contrast: #ffffff;
  --tdk-color-primary-soft: #e7f1fa;
  /* A step darker than the brand blue, so links pass 4.5:1 on tinted rows and soft fills. */
  --tdk-color-link: #0c69a9;
  --tdk-color-focus: var(--tyler-blue);
  --tdk-color-hover-wash: rgb(16 120 192 / 0.06);
  --tdk-color-overlay: rgb(48 51 58 / 0.45);

  /* App shell: Tyler's charcoal container and blue get-started bar */
  --tdk-shell-header-bg: #ffffff;
  --tdk-shell-header-text: var(--tyler-almost-black);
  --tdk-shell-accent: var(--tyler-blue);
  /* Light sidebar, one surface with the header: dark text, a hairline edge, and a soft blue active item. */
  --tdk-shell-sidebar-bg: #ffffff;
  --tdk-shell-sidebar-text: var(--tdk-color-text-secondary);
  --tdk-shell-sidebar-section: var(--tdk-color-text-muted);
  --tdk-shell-sidebar-active-bg: var(--tdk-color-primary-soft);
  --tdk-shell-sidebar-active-text: var(--tdk-color-link);
  --tdk-shell-sidebar-hover-bg: rgb(48 51 58 / 0.05);
  --tdk-shell-sidebar-hover-text: var(--tdk-color-heading);
  --tdk-shell-sidebar-rule: var(--tdk-color-border-subtle);
  --tdk-shell-sidebar-edge: var(--tdk-color-border-subtle);

  /* Panels: the fill, edge, top highlight and backdrop blur of the main UI surfaces (cards,
   * KPI tiles and the header). Opaque in light theme. Dark theme turns them into light glass
   * over --tdk-page-backdrop; presentation mode and print turn it back off. Menus, dialogs
   * and inputs keep the opaque --tdk-color-surface. */
  --tdk-panel-bg: var(--tdk-color-surface);
  --tdk-panel-border: var(--tdk-color-border-subtle);
  --tdk-panel-highlight: 0 0 #0000;
  --tdk-panel-blur: none;
  --tdk-page-backdrop: none;

  /* Process lanes: the risk, incident response and security operations pipelines, and the
   * handoffs between them (olive, as on the Security Automation portal). Each lane has a
   * solid stage color, a soft panel, a rule and a tint for secondary items. */
  --tdk-lane-risk: #40528f;
  --tdk-lane-risk-soft: #f3f5fb;
  --tdk-lane-risk-rule: #dfe2ef;
  --tdk-lane-risk-tint: #d8dced;
  --tdk-lane-incident: #a33a3f;
  --tdk-lane-incident-soft: #faf3f3;
  --tdk-lane-incident-rule: #efdcdc;
  --tdk-lane-incident-tint: #f0d3d5;
  --tdk-lane-operations: #00799b;
  --tdk-lane-operations-soft: #f0f6f8;
  --tdk-lane-operations-rule: #d3e5ea;
  --tdk-lane-operations-tint: #cde5ec;
  /* Dark enough for small text on its soft fill (5.4:1) and for white on it. */
  --tdk-lane-handoff: #5f692d;
  --tdk-lane-handoff-soft: #f3f5e8;
  --tdk-lane-handoff-rule: #dfe3c4;
  --tdk-lane-handoff-tint: #8f9b49;
  --tdk-lane-neutral: #5b5f73;
  --tdk-lane-neutral-soft: #f4f5f8;
  --tdk-lane-neutral-rule: #e2e4ec;
  --tdk-lane-neutral-tint: #d9dbe4;
  /* Arrows within a pipeline. */
  --tdk-lane-flow: #5d6ca3;
  /* Text on a solid handoff fill (markers, schema headers). */
  --tdk-lane-handoff-on: #ffffff;

  /* Chart chrome */
  --tdk-chart-surface: var(--tdk-color-surface);
  --tdk-chart-grid: #e6e7ee;
  --tdk-chart-axis: var(--tyler-gray-border);
  --tdk-chart-label: var(--tdk-color-text-muted);
  --tdk-chart-de-emphasis: #c4c6cf;
  /* Rivers on maps: teal, apart from the blue value ramp. */
  --tdk-chart-water: var(--tyler-teal-dark);

  /* Categorical series: fixed order, assign in sequence, never cycle. Brand-led opening
   * (Tyler blue, Tyler green). Red and yellow are deliberately absent: they mean severity. */
  --tdk-chart-1: #1078c0;
  --tdk-chart-2: #949932;
  --tdk-chart-3: #40528f;
  --tdk-chart-4: #d46fa6;
  --tdk-chart-5: #a8641e;
  --tdk-chart-6: #0e919e;
  --tdk-chart-7: #7b5bd6;
  --tdk-chart-8: #c2408a;
  /* Overlapping forms (radar, scatter) where any two series touch: max three series. */
  --tdk-chart-overlap-1: var(--tdk-chart-1);
  --tdk-chart-overlap-2: var(--tdk-chart-2);
  --tdk-chart-overlap-3: var(--tdk-chart-8);

  /* Sequential (magnitude: heatmaps), Tyler blue light to dark */
  --tdk-seq-1: #e2f1fe;
  --tdk-seq-2: #b7dcff;
  --tdk-seq-3: #8bc7fe;
  --tdk-seq-4: #58b2fe;
  --tdk-seq-5: #409be6;
  --tdk-seq-6: #2685ce;
  --tdk-seq-7: #0170b6;
  --tdk-seq-8: #005c97;
  --tdk-seq-9: #034877;

  /* Ordinal (ordered stages: funnels, tiers), strongest first, max six stages */
  --tdk-ord-1: #00406b;
  --tdk-ord-2: #005389;
  --tdk-ord-3: #0167a8;
  --tdk-ord-4: #187cc5;
  --tdk-ord-5: #3692dc;
  --tdk-ord-6: #4ea8f4;

  /* Diverging (above or below a baseline): blue good side, red bad side, gray midpoint */
  --tdk-div-positive: #1078c0;
  --tdk-div-negative: #b42318;
  --tdk-div-mid: #e6e7ee;
  /* Neutral diverging: two sides that are neither good nor bad (survey lean, skew, over or
   * under a split). Cool teal against warm copper; no red, so nothing reads as trouble. */
  --tdk-div-neutral-positive: #0e919e;
  --tdk-div-neutral-negative: #a8641e;

  /* Glass: strength of the soft highlight on bars and matrix cells, 0 (flat) to 1. */
  --tdk-glass: 1;

  /* Patterns: diagonal line textures on chart fills, a second channel besides hue for
   * color-vision deficiency, grayscale print and forced colors. Off by default; on with
   * data-patterns="on" (usePatterns() sets it app-wide) or in forced-colors mode. */
  --tdk-patterns: 0;
  --tdk-pattern-ink: rgb(0 0 0 / 0.32);

  /* Text size multiplier for chart axes, labels, legends and tooltips. */
  --tdk-chart-font-scale: 1;

  /* Risk ramp: narrowing steps of a risk funnel, from broad exposure (blue) to the most
   * concentrated risk (deep red). Multi-hue on purpose: each step reads as "worse". Steps are
   * always labeled and ordered, so color reinforces rather than carries the meaning. */
  --tdk-risk-1: #1078c0;
  --tdk-risk-2: #fdc302;
  --tdk-risk-3: #f08a24;
  --tdk-risk-4: #e0482f;
  --tdk-risk-5: #b42318;

  /* Heat ramp: counts in a risk matrix, log-bucketed; more items = hotter. Light theme runs
   * pale to deep red, dark theme runs dark to bright (hotter = more contrast on the surface). */
  --tdk-heat-0: var(--tdk-color-surface-sunken);
  --tdk-heat-1: #fff1c1;
  --tdk-heat-2: #fed27e;
  --tdk-heat-3: #fda54b;
  --tdk-heat-4: #f2703a;
  --tdk-heat-5: #d63c2b;
  --tdk-heat-6: #9d1b1e;
}

/* ---- Semantic colors: dark ----
 * Built on Tyler charcoal. useTheme() always stamps a resolved data-theme ("light" or
 * "dark", following the OS when the user picks "system"), and themeBootScript does the
 * same before first paint, so dark values are declared once, here. */
:root[data-theme='dark'] {
  --tdk-brand-blue: #a3b4f0;
  --tdk-brand-green: #bcc874;
  --tdk-brand-hi: rgb(255 255 255 / 0.75);
  --tdk-brand-glow: rgb(188 200 116 / 0.5);

  color-scheme: dark;
  /* A deep, slightly cool slate: low contrast between layers, so the page stays calm. */
  --tdk-color-bg: #111317;
  --tdk-color-surface: #1a1d22;
  --tdk-color-surface-alt: #20242a;
  --tdk-color-surface-sunken: #15171b;
  --tdk-color-text: #f3f3f8;
  --tdk-color-heading: #ffffff;
  --tdk-color-text-secondary: #c4c6cf;
  --tdk-color-text-muted: #9a9ca6;
  --tdk-color-border: #343944;
  --tdk-color-border-subtle: #262a31;
  --tdk-color-primary: #1078c0;
  --tdk-color-primary-hover: #4093cd;
  --tdk-color-primary-contrast: #ffffff;
  --tdk-color-primary-soft: rgb(57 149 223 / 0.16);
  --tdk-color-link: #6cb4f0;
  --tdk-color-focus: #6cb4f0;
  --tdk-color-hover-wash: rgb(255 255 255 / 0.04);
  --tdk-color-overlay: rgb(0 0 0 / 0.55);
  --tdk-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --tdk-shadow-md: 0 6px 16px rgb(0 0 0 / 0.35);
  --tdk-shadow-lg: 0 16px 40px rgb(0 0 0 / 0.5);

  --tdk-shell-header-bg: rgb(17 19 23 / 0.78);
  --tdk-shell-header-text: #f3f3f8;
  --tdk-shell-sidebar-bg: #0e1013;
  --tdk-shell-sidebar-text: var(--tyler-gray-border);
  --tdk-shell-sidebar-section: var(--tyler-gray-medium);
  --tdk-shell-sidebar-active-bg: var(--tyler-blue);
  --tdk-shell-sidebar-active-text: #ffffff;
  --tdk-shell-sidebar-hover-bg: rgb(255 255 255 / 0.08);
  --tdk-shell-sidebar-hover-text: #ffffff;
  --tdk-shell-sidebar-rule: rgb(255 255 255 / 0.08);
  --tdk-shell-sidebar-edge: transparent;

  --tdk-panel-bg: rgb(26 29 34 / 0.72);
  --tdk-panel-border: rgb(255 255 255 / 0.06);
  --tdk-panel-highlight: inset 0 1px 0 rgb(255 255 255 / 0.045);
  --tdk-panel-blur: blur(16px) saturate(125%);
  --tdk-page-backdrop:
    radial-gradient(1100px 620px at 12% -8%, rgb(16 120 192 / 0.1), transparent 62%),
    radial-gradient(900px 540px at 100% 0%, rgb(57 149 223 / 0.05), transparent 60%);

  /* Lanes: stage colors a step lighter so white labels and edges hold on slate; panels and
   * rules are washes of the stage color. */
  --tdk-lane-risk: #4b5ea3;
  --tdk-lane-risk-soft: rgb(75 94 163 / 0.12);
  --tdk-lane-risk-rule: rgb(120 138 204 / 0.3);
  --tdk-lane-risk-tint: rgb(120 138 204 / 0.32);
  --tdk-lane-incident: #a8434a;
  --tdk-lane-incident-soft: rgb(168 67 74 / 0.12);
  --tdk-lane-incident-rule: rgb(214 112 118 / 0.3);
  --tdk-lane-incident-tint: rgb(214 112 118 / 0.3);
  --tdk-lane-operations: #037f9f;
  --tdk-lane-operations-soft: rgb(3 127 159 / 0.13);
  --tdk-lane-operations-rule: rgb(64 178 206 / 0.3);
  --tdk-lane-operations-tint: rgb(64 178 206 / 0.3);
  --tdk-lane-handoff: #a9b45e;
  --tdk-lane-handoff-soft: rgb(169 180 94 / 0.12);
  --tdk-lane-handoff-rule: rgb(169 180 94 / 0.32);
  --tdk-lane-handoff-tint: #a9b45e;
  --tdk-lane-neutral: #8a8fa3;
  --tdk-lane-neutral-soft: rgb(255 255 255 / 0.04);
  --tdk-lane-neutral-rule: rgb(255 255 255 / 0.1);
  --tdk-lane-neutral-tint: rgb(255 255 255 / 0.14);
  --tdk-lane-flow: #8f9ccf;
  --tdk-lane-handoff-on: #15171b;

  /* Opaque, matching a panel over the page, for canvas separators and tooltips. */
  --tdk-chart-surface: var(--tdk-color-surface);
  --tdk-chart-grid: #2a2e35;
  --tdk-chart-axis: #3a3f48;
  --tdk-chart-label: #9a9ca6;
  --tdk-chart-de-emphasis: #555962;
  --tdk-chart-water: var(--tyler-aqua-medium);

  --tdk-chart-1: #3995df;
  --tdk-chart-2: #777b00;
  --tdk-chart-3: #768cce;
  --tdk-chart-4: #b8568c;
  --tdk-chart-5: #af6b26;
  --tdk-chart-6: #038e9b;
  --tdk-chart-7: #8262de;
  --tdk-chart-8: #c6448e;

  --tdk-seq-1: #034877;
  --tdk-seq-2: #005c97;
  --tdk-seq-3: #0170b6;
  --tdk-seq-4: #2685ce;
  --tdk-seq-5: #409be6;
  --tdk-seq-6: #58b2fe;
  --tdk-seq-7: #8bc7fe;
  --tdk-seq-8: #b7dcff;
  --tdk-seq-9: #e2f1fe;

  --tdk-ord-1: #9ed0ff;
  --tdk-ord-2: #6ebbff;
  --tdk-ord-3: #4ba5f0;
  --tdk-ord-4: #328fd9;
  --tdk-ord-5: #1279c1;
  --tdk-ord-6: #0064a4;

  --tdk-div-positive: #3995df;
  --tdk-div-negative: #f26b5b;
  --tdk-div-mid: #3a3f48;
  --tdk-div-neutral-positive: #038e9b;
  --tdk-div-neutral-negative: #af6b26;
  --tdk-glass: 0.7;
  --tdk-pattern-ink: rgb(0 0 0 / 0.4);

  --tdk-risk-1: #3995df;
  --tdk-risk-2: #fdc302;
  --tdk-risk-3: #f08a24;
  --tdk-risk-4: #f25c4a;
  --tdk-risk-5: #b8282a;

  --tdk-heat-1: #3e2a30;
  --tdk-heat-2: #6e2b45;
  --tdk-heat-3: #a3283f;
  --tdk-heat-4: #d9442f;
  --tdk-heat-5: #f08a24;
  --tdk-heat-6: #fdc95a;
}

[data-patterns='on'] {
  --tdk-patterns: 1;
}

[data-patterns='off'] {
  --tdk-patterns: 0;
}

@media (forced-colors: active) {
  :root {
    --tdk-patterns: 1;
  }
}

/* Presentation mode: for projectors and big screens across a room. Larger type everywhere,
 * secondary text and chart labels closer to full ink, gridlines a step stronger, no glass.
 * On with data-presentation="on" (usePresentation() sets it app-wide) or on any element; a
 * full-screen TdkSlideshow turns it on for itself. */
[data-presentation='on'] {
  --tdk-text-xs: 0.875rem;
  --tdk-text-sm: 1rem;
  --tdk-text-md: 1.125rem;
  --tdk-text-lg: 1.3125rem;
  --tdk-text-xl: 1.625rem;
  --tdk-text-2xl: 2.125rem;
  --tdk-text-3xl: 2.75rem;
  --tdk-text-hero: 3.75rem;
  --tdk-chart-font-scale: 1.25;
  --tdk-glass: 0;
  --tdk-panel-bg: var(--tdk-color-surface);
  --tdk-panel-blur: none;
  --tdk-page-backdrop: none;
  --tdk-color-text-secondary: #46474e;
  --tdk-color-text-muted: #55575e;
  --tdk-chart-label: #55575e;
  --tdk-chart-grid: #d9dae2;
}

:root[data-theme='dark'][data-presentation='on'],
:root[data-theme='dark'] [data-presentation='on'] {
  --tdk-color-text-secondary: #dcdee5;
  --tdk-color-text-muted: #b4b6bf;
  --tdk-chart-label: #b4b6bf;
  --tdk-chart-grid: #3a3f48;
}