/*
 * vengine UI tokens used by the portal: the names and exact values of the system's tokens.css
 * (design system "vengine UI", artifact G939wVJR9i6iLrzRp2WL8Q, generated from its
 * tokens.json). Never "improved": pairs below 4.5:1 are kept and flagged there, as here
 * (text-subtle, line).
 *
 * Page type: a vengine product page. White ground, one family at one weight, hierarchy by size
 * and colour, pills for controls, 16 px tiles, Galaxy only for states. No red, no green.
 *
 * Font: Moderat, licensed, never committed. `make fonts` copies it into kk_crm/static/fonts/
 * (git-ignored); the deploy fetches it from the build-assets bucket. Without it the stack falls
 * back to Helvetica Neue / Arial. The system's utility classes (.display, .meta, …) are left out:
 * the portal's own class names would collide with them.
 */
:root {
  /* brand and foundation ramps */
  --space: #000015;
  --space-500: #17172b;
  --space-400: #595974;
  --space-300: #7e7ea4;
  --space-200: #a9a9c2;
  --space-100: #d7d7e3;
  --space-50: #f2f2f6;
  --star: #ffffff;
  --galaxy: #8b4fff;
  --galaxy-500: #3e276b;
  --galaxy-400: #6841b5;
  --galaxy-200: #b792ff;
  --galaxy-100: #deccff;
  --galaxy-50: #f4efff;

  /* semantic */
  --surface: var(--star);
  --surface-subtle: var(--space-50);
  --surface-accent: var(--galaxy-50);
  --surface-inverse: var(--space);
  --text: var(--space);
  --text-muted: var(--space-400);
  --text-subtle: var(--space-300);        /* 3.9:1 on star: meta lines and "(optional)" only */
  --text-accent: var(--galaxy-400);
  --text-inverse: var(--star);
  --text-inverse-muted: var(--space-200);
  --line: var(--space-100);               /* 1.4:1: hairlines and field underlines */
  --line-strong: var(--space);
  --line-open: var(--space-200);
  --line-open-hover: var(--galaxy-200);
  --action: var(--space);
  --action-hover: var(--galaxy-500);
  --accent: var(--galaxy);
  --hover: var(--space-50);
  --focus: var(--galaxy);
  --overlay: rgba(0, 0, 21, 0.48);        /* Dialog: Space at 48 % */

  /* shadow */
  --shadow-lift: 0 32px 64px -24px rgba(0, 0, 21, 0.28);
  --shadow-menu: 0 24px 64px rgba(0, 0, 21, 0.14);
  --shadow-toast: 0 16px 40px rgba(0, 0, 21, 0.2);
  --shadow-panel: -24px 0 64px rgba(0, 0, 21, 0.18);

  /* spacing, radius, border, size */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-120: 120px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-menu: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --border-hairline: 1px;
  --border-strong: 2px;
  --size-control-lg: 56px;
  --size-control-md: 48px;
  --size-control-sm: 44px;
  --size-chip: 36px;
  --size-chip-sm: 28px;
  --size-header: 88px;
  --size-content: 1440px;

  /* motion */
  --duration-fast: 300ms;
  --duration-base: 700ms;
  --duration-slow: 900ms;
  --easing-out: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-soft: cubic-bezier(0.25, 1, 0.5, 1);

  /* type: Moderat Regular for everything, never bold, never italic, never caps */
  --font-sans: "Moderat", "Helvetica Neue", Arial, sans-serif;
  --text-display: 400 clamp(56px, 7vw, 100px)/1 var(--font-sans);
  --text-kpi: 400 clamp(32px, 2.8vw, 40px)/1 var(--font-sans);
  --text-h2: 400 clamp(28px, 2.4vw, 32px)/1.15 var(--font-sans);
  --text-h3: 400 clamp(24px, 2vw, 28px)/1.1 var(--font-sans);
  --text-h4: 400 24px/1.25 var(--font-sans);
  --text-item: 400 20px/1.3 var(--font-sans);
  --text-lead: 400 18px/1.3 var(--font-sans);
  --text-body: 400 16px/1.5 var(--font-sans);
  --text-label: 400 16px/1 var(--font-sans);
  --text-meta: 400 14px/1.4 var(--font-sans);
}

@font-face {
  font-family: "Moderat";
  src: url("/static/fonts/Moderat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}