/* wwwroot/css/tokens.css - single source of colour/size tokens (DESIGN.md v1.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 */
  --font-family: Poppins, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-display: 3.125rem;     /* 50 */
  --text-hero: 2rem;            /* 32 */
  --text-xl: 1.5rem;            /* 24 */
  --text-tab: 1.375rem;         /* 22 */
  --text-lg: 1.25rem;           /* 20 */
  --text-md: 0.9375rem;         /* 15 */
  --text-sm: 0.875rem;          /* 14 */
  --text-chat: 0.8125rem;       /* 13 */
  --text-xs: 0.75rem;           /* 12 - the floor */
  --lh-display: 1.16;
  --lh-tight: 1.3;
  --lh-body: 1.5;
  --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.03em;

  /* spacing (observed multiples) */
  --space-1: 0.25rem;           /* 4 */
  --space-2: 0.5rem;            /* 8 */
  --space-3: 0.75rem;           /* 12 */
  --space-4: 1rem;              /* 16 */
  --space-5: 1.375rem;          /* 22 */
  --space-6: 1.875rem;          /* 30 */
  --space-7: 2.625rem;          /* 42 */
  --space-8: 4.0625rem;         /* 65 */
  --nav-gap: 3rem;              /* 48 */

  /* radii */
  --radius-xs: 8px;
  --radius-chip: 14px;
  --radius-md: 18px;
  --radius-field-sm: 20px;
  --radius-field: 24px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --radius-chat: 38px;
  --radius-pill: 999px;

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

  /* layout */
  --nav-height: 100px;
  --subheader-height: 108px;
  --gutter: 65px;
  --header-inset: calc(var(--gutter) + 30px);
  --card-gap: 24px;
  --sidebar-width: 278px;
  --chat-width: clamp(380px, 27.4vw, 526px);
  --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: 1599px) { :root { --gutter: 40px; --sidebar-width: 240px; } }
@media (max-width: 1279px) { :root { --gutter: 24px; --sidebar-width: 200px; --nav-gap: 1.5rem; } }
@media (max-width: 1099px) { :root { --gutter: 24px; } }
@media (max-width: 767px) {
  :root {
    --gutter: 16px; --header-inset: 16px; --nav-height: 56px; --card-gap: 16px;
    --radius-xl: 24px; --radius-lg: 20px; --radius-md: 16px; --radius-chat: 28px;
  }
}
@media (prefers-contrast: more) {
  :root { --field-edge: var(--color-field-border-hc); }
}