/* KwalitAI design tokens: the only file that holds colour, spacing, radius,
   font, duration and z-index values. Contrast ratios are WCAG 2.1, measured
   against the background named in the comment (AA: 4.5 text, 3 non-text). */

:root {
  /* Backgrounds */
  --bg-base: #F4F4F8;        /* page ground */
  --bg-surface: #FFFFFF;     /* cards, forms */
  --bg-elevated: #F7F7FB;    /* panel nested in a card */
  --bg-inverse: #17161F;     /* dark band, summary aside */
  --bg-track: #EEEDF7;       /* empty part of the score scale */
  --bg-cell-empty: #E6E5EF;  /* unfilled axis cell, disabled control */
  --bg-chip: #EEEDF3;        /* neutral chip (stable) */

  /* Borders */
  --border-subtle: #E2E2EA;  /* card outline, decorative */
  --border-strong: #B9B7CC;  /* scale ticks, dashed "method changed", decorative */
  --border-control: #8E8CA3; /* form field boundary: 3.27 on bg-surface */

  /* Text */
  --text-primary: #17161F;   /* 17.93 on bg-surface, 16.35 on bg-base */
  --text-secondary: #4B4A5C; /* 8.63 on bg-surface, 7.87 on bg-base, 7.42 on bg-chip */
  --text-muted: #5C5B6E;     /* 6.61 on bg-surface, 6.03 on bg-base, 5.29 on bg-cell-empty */
  --text-inverse: #FFFFFF;   /* 17.93 on bg-inverse */
  --text-inverse-muted: #CFCDDC; /* 11.46 on bg-inverse */

  /* Accent: brand, score fill, improvement */
  --accent: #3730C9;         /* 8.65 on bg-surface */
  --accent-hover: #2A2499;   /* 9.45 on accent-soft */
  --accent-soft: #E7E6FB;
  --on-accent: #FFFFFF;      /* 8.65 on accent */
  --accent-on-inverse: #B3AFFF; /* 8.96 on bg-inverse */

  /* Status: improvement reuses the accent, regression is the only warm hue */
  --ok: var(--accent);
  --ok-soft: var(--accent-soft);
  --warn: #C2410C;           /* regression, weakest axis: 5.18 on bg-surface, white text 5.18 */
  --warn-soft: #FBEDE4;
  --warn-ink: #8A3A08;       /* 6.82 on warn-soft */
  --on-warn: #FFFFFF;        /* 5.18 on warn */
  --danger: #8A3A08;         /* field error text: 6.82 on warn-soft */
  --danger-soft: #FBEDE4;
  --neutral-badge: #6F6E80;  /* "not rated" badge: white text 4.98 */

  /* Type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --step--2: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --step--1: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);
  --step-2: clamp(1.75rem, 1.5rem + 1.2vw, 2.75rem);
  --step-3: clamp(2.5rem, 2rem + 2.4vw, 4.75rem);
  --step-4: clamp(3.5rem, 2.6rem + 4.2vw, 7rem);
  --leading-tight: 1;
  --leading-body: 1.6;
  --tracking-display: -0.035em;

  /* Spacing: 4px grid */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --gap-tight: var(--space-2xs);
  --gap-normal: var(--space-s);
  --gap-section: var(--space-2xl);
  --measure: 46em;
  --container: 74rem;

  /* Radii */
  --radius-sm: 4px;          /* axis cell */
  --radius: 12px;            /* buttons, fields */
  --radius-card: 18px;
  --radius-lg: 22px;         /* hero and section cards */
  --radius-pill: 999px;
  --radius-btn: var(--radius);

  /* Elevation: flat by default, borders carry structure */
  --shadow-1: 0 1px 2px rgb(23 22 31 / 0.06);
  --shadow-2: 0 8px 24px rgb(23 22 31 / 0.10);

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

  /* Interaction */
  --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 0 5px var(--accent);
  --tap-min: 44px;

  /* Layering */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal: 30;
  --z-toast: 40;

  /* Breakpoints: audited allowlist, media queries repeat these literals */
  --break-phone: 640px;
  --break-tablet: 880px;
  --break-wide: 1180px;
}

/* Dark theme: tokens only, structure unchanged. Server sets data-theme. */
[data-theme="dark"] {
  --bg-base: #121119;
  --bg-surface: #1C1B26;
  --bg-elevated: #22212E;
  --bg-inverse: #F1F0F7;          /* text-inverse 15.84, accent-on-inverse 7.64 */
  --bg-track: #2A2938;
  --bg-cell-empty: #2E2D3C;
  --bg-chip: #2A2938;
  --border-subtle: #2E2D3C;
  --border-strong: #4A4860;
  --border-control: #6E6C82;      /* 3.35 on bg-surface */
  --text-primary: #F1F0F7;        /* 15.03 on bg-surface, 16.56 on bg-base */
  --text-secondary: #B8B6C8;      /* 8.56 on bg-surface */
  --text-muted: #A3A1B5;          /* 6.74 on bg-surface, 7.43 on bg-base, 5.35 on bg-cell-empty */
  --text-inverse: #17161F;
  --text-inverse-muted: #4B4A5C;  /* 7.62 on bg-inverse */
  --accent: #8C86FF;              /* 5.65 on bg-surface */
  --accent-hover: #A9A4FF;        /* 6.20 on accent-soft */
  --accent-soft: #2B2850;
  --on-accent: #121119;           /* 6.22 on accent */
  --accent-on-inverse: #3730C9;
  --warn: #F08A4B;                /* 6.84 on bg-surface */
  --warn-soft: #3A2418;
  --warn-ink: #F08A4B;            /* 5.84 on warn-soft */
  --on-warn: #121119;             /* 7.54 on warn */
  --danger: #F08A4B;
  --danger-soft: #3A2418;
}