/* StepDraw design tokens. The real web app (stepdraw_web/static/) uses this file as-is.
   Primary = violet, surfaces = white and light lavender, tertiary = red (only for "needs attention").
   docs/DESIGN.md explains why each value was chosen. */
:root {
  /* color */
  --ink: #22163F;          /* text, 14.9:1 on white */
  --ink-2: #5E5478;        /* secondary text, 6.6:1 */
  --ink-3: #8D85A3;        /* hints, disabled */
  --violet: #5B2EC4;       /* primary: buttons, selection, "check passed" */
  --violet-strong: #47209F;/* hover / pressed */
  --violet-tint: #ECE5FB;  /* selected row, active tab */
  --violet-wash: #F6F3FC;  /* app background */
  --paper: #FFFFFF;        /* panels, drawing sheet */
  --line: #E4DCF3;         /* hairlines */
  --line-strong: #CFC3EA;
  --red: #D21F3C;          /* tertiary: FAIL, needs review, destructive. 5.1:1 on white */
  --red-strong: #A9142D;
  --red-tint: #FDECEF;
  --brand-arrow: #FF8585;
  --focus: 0 0 0 3px rgba(91, 46, 196, .35);

  /* type: IBM Plex Sans (Latin, Cyrillic) + IBM Plex Sans KR, Chinese falls back to the system font */
  --font: "IBM Plex Sans", "IBM Plex Sans KR", "Microsoft YaHei", "PingFang SC", "Malgun Gothic", system-ui, sans-serif;
  --fs-xs: 12px;  --fs-sm: 13px;  --fs-md: 14px;  --fs-lg: 17px;  --fs-xl: 22px;
  --lh: 1.45;

  /* space and shape: tight radius on data, larger only on the sheet */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-sm: 4px; --r-md: 6px;
  --shadow-sheet: 0 1px 2px rgba(34, 22, 63, .06), 0 8px 24px rgba(34, 22, 63, .08);
}