/* Omnia.tax — design B tokens (v2). Source of truth: /workspace/figma/b_gen_flow.py + the brief.
   Every value here appears in the generator; nothing is invented. Sharp corners everywhere. */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap");

:root {
  /* ---------- colour: core palette (brief) ---------- */
  --color-white: #FFFFFF;
  --color-panel: #F3F4F7;
  --color-ink: #0A0A0A;
  --color-cobalt: #1F3BFF;
  --color-gray: #6E7079;
  --color-hairline: #E1E3E8;
  --color-success: #12B76A;
  --color-error: #F04438;
  /* ---------- colour: derived tints used by the generator ---------- */
  --color-placeholder: #A3A5AD;      /* placeholder + disabled text */
  --color-on-cobalt-muted: #C7CEFF;  /* secondary text on cobalt */
  --color-on-cobalt-rule: #576CFF;   /* hairlines on cobalt */
  --color-on-ink-muted: #9A9CA5;     /* secondary text on black */
  --color-on-ink-rule: #2A2B30;      /* hairlines on black */
  --color-on-ink-accent: #8C9BFF;    /* strings / accents on black (cobalt is too dark on ink) */

  /* ---------- semantic ---------- */
  --color-bg: var(--color-white);
  --color-surface: var(--color-panel);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-gray);
  --color-accent: var(--color-cobalt);
  --color-border: var(--color-hairline);

  /* ---------- fonts ---------- */
  --font-sans: "Inter Tight", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* ---------- type scale: size / line-height / weight / letter-spacing ---------- */
  --text-figure-price-size: 380px;  --text-figure-price-lh: 1;    --text-figure-price-weight: 700; --text-figure-price-ls: -18px;
  --text-figure-fifty-size: 300px;  --text-figure-fifty-lh: 1;    --text-figure-fifty-weight: 700; --text-figure-fifty-ls: -16px;
  --text-figure-step-size: 250px;   --text-figure-step-lh: 1;     --text-figure-step-weight: 700;  --text-figure-step-ls: -14px;
  --text-display-xl-size: 136px;    --text-display-xl-lh: 0.92;   --text-display-xl-weight: 700;   --text-display-xl-ls: -6px;
  --text-display-lg-size: 112px;    --text-display-lg-lh: 0.94;   --text-display-lg-weight: 700;   --text-display-lg-ls: -5px;
  /* lh values for display-md, display-sm, heading-md, heading-sm, title, lead-lg are SUGGESTED: these styles are only ever
     single-line in the design, so the generator never sets a line-height for them. */
  --text-display-md-size: 96px;     --text-display-md-lh: 1;      --text-display-md-weight: 700;   --text-display-md-ls: -4px;
  --text-display-sm-size: 64px;     --text-display-sm-lh: 1;      --text-display-sm-weight: 700;   --text-display-sm-ls: -3px;
  --text-heading-lg-size: 48px;     --text-heading-lg-lh: 1.08;   --text-heading-lg-weight: 700;   --text-heading-lg-ls: -2px;
  --text-heading-md-size: 40px;     --text-heading-md-lh: 1.1;    --text-heading-md-weight: 700;   --text-heading-md-ls: -1.5px;
  --text-heading-sm-size: 32px;     --text-heading-sm-lh: 1.1;    --text-heading-sm-weight: 700;   --text-heading-sm-ls: -1.2px;
  --text-title-lg-size: 28px;       --text-title-lg-lh: 1.1;      --text-title-lg-weight: 700;     --text-title-lg-ls: -0.8px;
  --text-title-size: 24px;          --text-title-lh: 1.2;         --text-title-weight: 700;        --text-title-ls: -0.6px;
  --text-lead-lg-size: 20px;        --text-lead-lg-lh: 1.4;       --text-lead-lg-weight: 700;      --text-lead-lg-ls: 0;
  --text-lead-size: 18px;           --text-lead-lh: 28px;         --text-lead-weight: 400;         --text-lead-ls: 0;
  --text-body-size: 16px;           --text-body-lh: 24px;         --text-body-weight: 400;         --text-body-ls: 0;
  --text-small-size: 14px;          --text-small-lh: 21px;        --text-small-weight: 400;        --text-small-ls: 0;
  --text-caption-size: 13px;        --text-caption-lh: 20px;      --text-caption-weight: 400;      --text-caption-ls: 0;
  /* mono (always uppercase for labels) */
  --text-eyebrow-size: 12px;        --text-eyebrow-lh: 16px;      --text-eyebrow-weight: 700;      --text-eyebrow-ls: 2px;
  --text-label-size: 11px;          --text-label-lh: 16px;        --text-label-weight: 700;        --text-label-ls: 1.6px;
  --text-micro-size: 10px;          --text-micro-lh: 16px;        --text-micro-weight: 400;        --text-micro-ls: 1.2px;
  --text-code-lg-size: 14px;        --text-code-lg-lh: 26px;      /* landing request panel */
  --text-code-size: 13px;           --text-code-lh: 22px;         /* docs code column */
  --text-code-sm-size: 12px;        --text-code-sm-lh: 20px;      /* sandbox code panel, states board */
  --text-button-ls: -0.2px;         /* all button labels, 700 */

  /* ---------- spacing: 8px scale (4 = the only half step) ---------- */
  --space-0-5: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-10: 80px;
  --space-12: 96px;
  --space-15: 120px;          /* landing section gap */

  /* ---------- borders & radii ---------- */
  --border-hairline: 1px solid var(--color-hairline);
  --border-rule: 2px solid var(--color-ink);         /* input bottom rule, top-bar bottom */
  --border-rule-heavy: 3px solid var(--color-ink);   /* table heads, section rules */
  --border-rule-xl: 6px solid var(--color-ink);      /* landing section heads, docs section heads */
  --rule-progress: 6px;                              /* progress step bar height */
  --radius: 0;                                       /* sharp corners, everywhere */

  /* ---------- grid ---------- */
  --grid-frame: 1440px;      /* design frame width */
  --grid-max-width: 1312px;  /* content width = frame - 2 x margin */
  --grid-columns: 12;
  --grid-gutter: 24px;
  --grid-margin: 64px;
  --grid-column: 87.33px;    /* fluid in code: (max-width - 11 gutters) / 12 */

  /* ---------- controls ---------- */
  --control-h-lg: 48px;  --control-px-lg: 24px;   /* primary actions, inputs */
  --control-h-md: 40px;  --control-px-md: 16px;   /* landing nav buttons */
  --control-h-sm: 32px;  --control-px-sm: 16px;   /* console top bar, key menu (label 14px) */
  --input-h: 48px;
  --input-px: 16px;
  --label-gap: 8px;          /* label line box (16) -> 8 -> control */
  --field-gap: 24px;         /* between stacked fields (96px pitch) */
  --code-box-w: 72px;  --code-box-h: 80px;  --code-box-gap: 8px;  --code-box-group-gap: 32px;
  --stepper-button: 48px;  --stepper-value-w: 120px;
  --icon-arrow: 16px;  --icon-gap: 8px;

  /* ---------- focus ---------- */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--color-cobalt);
  --focus-ring: 0 0 0 2px var(--color-cobalt);        /* inputs: inset 2px border replaces the bottom rule */
  --error-ring: 0 0 0 2px var(--color-error);
}