/* ==========================================================================================
   EvoTrace design tokens — the one place colour, type, shape, depth and motion are decided.

   The workbench links this file before its own stylesheet; the report pages the analysis stages
   write inline it (scripts/reporting.py), so a report opened on its own and one shown inside the
   workbench are the same product. Components use these names, never raw values: a new shade or
   size is added here, with a reason, or not at all.
   ========================================================================================== */
:root {
  /* ---- neutrals: text, lines, surfaces ------------------------------------------------- */
  --ink: #172730;           /* body text, headings */
  --ink-2: #3A4F57;         /* strong secondary: labels, table heads, secondary headings */
  --muted: #56676F;         /* secondary text */
  --subtle: #7A8B91;        /* meta: times, counts, captions */
  --faint: #9DAAAD;         /* placeholders, disabled */
  --line-strong: #C5D0CD;   /* input borders, a line that must be seen */
  --line: #D8DEDC;          /* card and control borders */
  --line-soft: #E4EAE8;     /* dividers inside a card */
  --surface: #FFFFFF;       /* cards, inputs, menus */
  --surface-2: #FAFCFB;     /* a panel inside a card; quiet fills */
  --wash: #F5F8F7;          /* the page behind the cards */
  --surface-3: #EEF2F1;     /* hover and pressed fills, sunken wells */

  /* ---- the accent: teal, the colour of "this moves the analysis on" ------------------- */
  --teal-ink: #1D514D;      /* text on a teal wash */
  --teal-deep: #22674F;     /* hover and pressed accent */
  --teal: #2A826B;          /* the accent */
  --teal-soft: #9CC7B8;     /* accent lines that should recede */
  --teal-line: #CBE3D9;     /* borders of accent-washed surfaces */
  --teal-wash: #EFF8F4;     /* accent-washed surfaces */

  /* ---- status: problem (red), caution (amber), information (blue) --------------------- */
  --red-ink: #8C3B2A;
  --red: #B4533C;
  --red-line: #E1B5AA;
  --red-wash: #FCF4F1;
  --amber-ink: #7A5A12;
  --amber: #B99442;
  --amber-line: #E6D6AE;
  --amber-wash: #FAF7EE;
  --blue-ink: #2F5870;
  --blue: #527F98;
  --blue-line: #BFD3DB;
  --blue-wash: #EFF4F7;
  --cover: #17324D;         /* the sign-in page's deep ground */

  /* ---- data: categories in a figure, and how strongly a branch is supported ------------- */
  /* Separate from the interface colours on purpose: a figure's colours mean data, not state. */
  --viz-1: #2A78D6;
  --viz-2: #EB6834;
  --viz-3: #1BAF7A;
  --viz-strong: var(--teal);
  --viz-moderate: #C9A227;
  --viz-weak: var(--faint);
  --terminal: #12211C;      /* a live terminal session's ground */

  /* ---- type ------------------------------------------------------------------------------ */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", "Songti SC", "Noto Serif CJK SC", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 11px;          /* meta, kickers */
  --text-sm: 12px;          /* secondary text, dense tables, controls */
  --text-base: 13px;        /* body text */
  --text-md: 14px;          /* emphasised body, card titles */
  --text-lg: 16px;          /* section titles */
  --text-xl: 18px;
  --text-2xl: 20px;         /* page and card headlines */
  --text-3xl: 24px;
  --text-4xl: 30px;         /* the welcome's headline */
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-strong: 700;
  --leading-tight: 1.25;
  --leading: 1.5;
  --leading-loose: 1.65;

  /* ---- shape ------------------------------------------------------------------------------ */
  --r-2xs: 4px;             /* marks, tiny tags */
  --r-xs: 6px;              /* chips inside rows, code */
  --r-s: 10px;              /* buttons, inputs, rows inside a card */
  --r-m: 14px;              /* cards */
  --r-l: 18px;              /* the panels cards sit in */
  --r-pill: 999px;

  /* ---- depth ------------------------------------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(23, 39, 48, 0.04);                                   /* resting card */
  --shadow-2: 0 1px 2px rgba(23, 39, 48, 0.04), 0 6px 18px -12px rgba(23, 39, 48, 0.18);  /* raised */
  --shadow-3: 0 18px 44px -18px rgba(23, 39, 48, 0.32), 0 2px 6px rgba(23, 39, 48, 0.06); /* menus, dialogs */
  --shadow-accent: 0 6px 14px -6px rgba(31, 107, 87, 0.5);                        /* a primary action, hovered */
  --focus-ring: 0 0 0 3px rgba(42, 130, 107, 0.22);

  /* ---- space: a 4px grid ------------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ---- a page: where its content starts, the same for the workbench's own pages and for a
     report shown inside it (the report reads these too, so the edges line up) ----------------- */
  --page-top: 22px;
  --page-gutter: clamp(24px, 3.3vw, 54px);

  /* ---- older names, kept so nothing written against them breaks ----------------------------- */
  --shadow-card: var(--shadow-1);
  --shadow-lift: var(--shadow-2);
  --slate: var(--subtle);
  --ref-grey: var(--line-strong);
}