/* wwwroot/css/tokens.css - single source of colour/size tokens (DESIGN.md v2.0.0). */
:root {
  color-scheme: dark;

  /* surfaces and depth ladder */
  --color-bg: #02040F;
  --color-bg-glow-1: #031020;
  --color-bg-glow-2: #041128;
  --color-surface-1: #0A0C16;
  --color-surface-2: #131626;
  --color-surface-3: #212643;
  --color-surface-hover-1: #0F1220;
  --color-surface-hover-2: #1A1F38;

  /* top bar gradient */
  --color-nav-start: #2F2F50;
  --color-nav-peak: #38386C;
  --color-nav-mid: #323656;
  --color-nav-end: #313153;
  --color-nav-edge: #2B2E48;
  --color-nav-base: #202939;

  /* action and accent */
  --color-primary: #3FAB4D;
  --color-primary-hover: #47BC57;
  --color-primary-pressed: #369443;
  --color-on-primary: #02040F;
  --color-accent: #80B3FF;
  --color-accent-hover: #9CC4FF;
  --color-accent-pressed: #6EA3F0;
  --color-on-accent: #02040F;
  --color-accent-strong: #687EFF;
  --color-chart-pair-light: #88B9FF;
  --color-check: #33C455;
  --color-on-check: #02040F;
  --color-indicator-positive: #00D26A;
  --color-brand-purple: #473080;
  --color-brand-purple-ring: #352A71;
  --color-tenant-red: #A63137;

  /* text */
  --color-text: #FFFFFF;
  --color-text-body: #E6E7EB;
  --color-text-muted: #A9AAB2;
  --color-text-subtle: #8E90A0;
  --color-text-disabled: #5B5E70;

  /* semantic (always with icon / sign + word) */
  --color-positive: #26A31A;
  --color-positive-strong: #4CC15A;
  --color-negative: #FF6B6E;
  --color-warning: #F5B83D;
  --color-info: #80B3FF;
  --tint-info: #1D273B;       /* 16 % of --color-info over surface-1 */
  --tint-warning: #30281C;
  --tint-negative: #311B24;
  --tint-positive: #152921;
  --tint-neutral: #131626;

  /* lines, overlays, states */
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-field-border-hc: #898B93;
  --color-focus-ring: #80B3FF;
  --color-scrim: rgba(2, 4, 15, 0.72);
  --color-send-arrow-disabled: #282E50;
  --color-toggle-off: #5B6385;

  /* report replica skin */
  --color-report-frame: #19212E;
  --color-report-panel: #263144;
  --color-report-header: #354262;
  --color-report-slicer: #3C3664;
  --color-report-slicer-neutral: #333333;
  --color-report-divider: #4A5568;
  --color-scrollbar-thumb: #6D7179;

  /* categorical chart palette for new charts - fixed order, never cycled */
  --color-chart-1: #687EFF;
  --color-chart-2: #D95926;
  --color-chart-3: #199E70;
  --color-chart-4: #C98500;
  --color-chart-5: #D55181;
  --color-chart-6: #008300;
  --color-chart-7: #9085E9;
  --color-chart-8: #E66767;

  /* typography (13 px body; DESIGN.md 4.1) */
  --font-family: Poppins, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-display: 2.5rem;       /* 40 - login slogan */
  --text-hero: 1.5rem;          /* 24 - CONTACT US / FOLLOW US */
  --text-kpi: 1.375rem;         /* 22 - KPI values */
  --text-xl: 1.25rem;           /* 20 - the visible page heading */
  --text-login: 1.125rem;       /* 18 - login heading; the page heading on phones */
  --text-lg: 1rem;              /* 16 - heading-2, price */
  --text-md: 0.875rem;          /* 14 - lg buttons, login field values */
  --text-tab: 0.875rem;         /* 14 - section tabs, in-page tab strips */
  --text-sm: 0.8125rem;         /* 13 - body, buttons, sidebar labels, domain tabs, card titles */
  --text-chat: 0.8125rem;       /* 13 */
  --text-xs: 0.75rem;           /* 12 - the floor */
  --lh-display: 1.2;
  --lh-tight: 1.33;             /* 16 on 12 */
  --lh-body: 1.54;              /* 20 on 13 */
  --lh-chat: 1.54;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-upper: 0.04em;
  --tracking-card-title: 0.02em;
  --tracking-nav: 0.02em;

  /* spacing: 4 px grid */
  --space-1: 0.25rem;           /* 4 */
  --space-2: 0.5rem;            /* 8 */
  --space-3: 0.75rem;           /* 12 */
  --space-4: 1rem;              /* 16 */
  --space-5: 1.25rem;           /* 20 */
  --space-6: 1.5rem;            /* 24 */
  --space-7: 2rem;              /* 32 */
  --space-8: 2.5rem;            /* 40 */
  --nav-gap: 0.25rem;           /* 4 - between top-bar entries */

  /* radii */
  --radius-xs: 4px;
  --radius-chip: 6px;
  --radius-md: 8px;
  --radius-field-sm: 8px;
  --radius-field: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-chat: 12px;
  --radius-pill: 999px;

  /* elevation: none, except overlays */
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);

  /* layout */
  --nav-height: 48px;
  --context-row-h: 40px;
  --gutter: 24px;
  --header-inset: var(--gutter);  /* alias: the top bar and the context row share the content inset */
  --content-top: 16px;
  --card-gap: 16px;
  --sidebar-width: 232px;
  --chat-width: clamp(340px, 26vw, 440px);

  /* controls, items, rows, targets (DESIGN.md 5.4, 14) */
  --control-h-sm: 28px;
  --control-h-md: 32px;
  --control-h-lg: 40px;
  --field-stacked-h: 44px;
  --nav-item-h: 36px;
  --sidebar-item-h: 32px;
  --table-head-h: 32px;
  --table-row-h: 36px;
  --table-row-compact-h: 32px;
  --target-min: 32px;            /* fine pointer (WCAG 2.2 AA 2.5.8 asks for 24) */
  --touch-min: 44px;
  --field-edge: transparent;      /* field outline colour; switched on by prefers-contrast: more */

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

  /* z-index scale */
  --z-sticky: 20;
  --z-nav: 40;
  --z-drawer: 60;
  --z-dialog: 70;
  --z-toast: 80;
}

@media (max-width: 1279px) { :root { --sidebar-width: 208px; } }
@media (max-width: 1099px) { :root { --gutter: 16px; } }
@media (max-width: 767px) {
  :root {
    --gutter: 12px; --card-gap: 12px; --content-top: 12px;
  }
}
/* touch: every target reaches 44 px; the look of sm controls stays compact; the context row's rows are 44 under a coarse pointer at every width (DESIGN.md 14, 10.2) */
@media (pointer: coarse), (max-width: 767px) {
  :root {
    --target-min: var(--touch-min); --control-h-sm: 36px; --control-h-md: var(--touch-min); --control-h-lg: var(--touch-min);
    --nav-item-h: var(--touch-min); --sidebar-item-h: var(--touch-min); --context-row-h: var(--touch-min);
  }
}
@media (prefers-contrast: more) {
  :root { --field-edge: var(--color-field-border-hc); }
}