/* Brand tokens, the clean line system. This file is the only place raw colour values live.
   Two layers: primitives (--p-*) hold the palette, roles (--c-*, --fs-*, --s-*, --r-*, --d-*) are what a page consumes.
   Lines do the work: every container, divider and row is a 1 px hairline; there are no shadows except the focus ring,
   flat fills only and no coloured section backgrounds.
   Verdict rule: green means the work was rerun and the changed lines ran. Not tested is amber, not checked is grey,
   failed is red. Blue is the action colour and never a verdict.
   The product name is one value (--brand-name) and the mark is one file (mark.svg, group id "wing"). */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Name: the one value to change when the name is final. */
  --brand-name: "Product";

  /* Palette primitives. Ink is the neutral ramp, sky the one accent, then the three verdict hues. */
  --p-white: #FFFFFF;
  --p-ink-25: #FAFAFA;
  --p-ink-50: #F4F4F5;
  --p-line: #E8E8E6;
  --p-line-strong: #D4D4D1;
  --p-ink-400: #A1A1AA;
  /* Lightest grey allowed for text: 4.63 to 1 on white, the WCAG 1.4.3 floor with margin. ink-400 stays for non-text strokes. */
  --p-ink-450: #74747D;
  --p-ink-500: #71717A;
  --p-ink-700: #3F3F46;
  --p-ink-950: #0A0A0A;
  --p-dark-sunken: #111111;
  --p-dark-raised: #18181B;
  --p-dark-line: #222224;
  --p-dark-line-strong: #2E2E31;
  --p-dark-ink-2: #D4D4D8;
  --p-sky-50: #EEF2FE;
  --p-sky-400: #7C9BFF;
  --p-sky-500: #2B5CF0;
  --p-sky-600: #1E47C8;
  --p-sky-ring: rgb(43 92 240 / 0.28);
  --p-green-600: #16A34A;
  --p-green-700: #15803D;
  --p-green-400: #4ADE80;
  --p-green-tint: #F0FDF4;
  --p-green-tint-dark: #0D1F14;
  --p-green-line: rgb(22 163 74 / 0.06);
  --p-amber-700: #B45309;
  --p-amber-400: #FBBF24;
  --p-amber-tint: #FFFBEB;
  --p-amber-tint-dark: #221808;
  --p-amber-line: rgb(180 83 9 / 0.04);
  --p-amber-line-dark: rgb(251 191 36 / 0.07);
  --p-red-600: #DC2626;
  --p-red-700: #B91C1C;
  --p-red-400: #F87171;
  --p-red-tint: #FEF2F2;
  --p-red-tint-dark: #2A1111;
  --p-grey-tint-dark: #1C1C1F;

  /* Type. Inter for every interface and reading face, Outfit for the wordmark only, JetBrains Mono for evidence. */
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-text);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --stretch-display: 100%;
  /* The wordmark is Outfit 500 lowercase. */
  --font-wordmark: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --wordmark-weight: 500;
  --wordmark-track: -0.035em;
  --wordmark-track-long: -0.03em;

  /* One type scale. 12 px is the floor and only for chips and mono data, 13 px for labels, 14 px app body, 16 px landing body. */
  --fs-chip: 0.75rem;
  --fs-micro: 0.8125rem;
  --fs-0: 0.875rem;
  --fs-1: 1rem;
  --fs-2: 1.125rem;
  --fs-3: 1.25rem;
  --fs-4: 1.5rem;
  --fs-5: 2rem;
  --fs-6: 2.5rem;
  --fs-7: 3rem;
  --fs-8: 3.5rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh-app: 1.4286;
  --lh-body: 1.625;
  --lh-code: 1.6;
  --track-display: -0.02em;
  --track-heading: -0.01em;
  --track-body: -0.006em;
  --track-label: 0;

  /* Space on a 4 px grid: 4, 8, 12, 16, 24, 32, 48, 64, 96. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Sizes. Controls are 32 px (36 on the landing), list rows 44 px, icons 16 px at a 1.5 px stroke. */
  --size-icon-s: 1rem;
  --size-icon-m: 1rem;
  --size-icon-l: 1.25rem;
  --size-control: 2rem;
  --size-control-l: 2.25rem;
  --size-row: 2.75rem;
  --size-touch: 2rem;
  --size-page: 75rem;
  --size-hairline: 1px;
  --size-stroke: 2px;
  --size-icon-stroke: 1.5px;
  --size-focus: 3px;
  --size-dot: 6px;
  --size-meter: 2px;

  /* Mark geometry, from the 32 unit construction grid: wing 10, gap 4, lift 4, on a 45 degree lattice. */
  --mark-ratio: 28 / 18;
  --mark-to-cap: 1.3;
  --mark-gap: 0.36em;
  --mark-clear: 0.56;

  /* Radius: 6 px controls and chips, 8 px containers, 12 px only for the product window frame. */
  --r-1: 6px;
  --r-2: 6px;
  --r-3: 8px;
  --r-frame: 12px;
  --r-icon: 22.5%;
  --r-pill: 999px;

  /* Motion: 150 ms, opacity and transform only. */
  --d-fast: 150ms;
  --d-strike: 150ms;
  --d-base: 150ms;
  --d-slow: 150ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-strike: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --strike-scale: 1;
}

:root,
[data-theme="light"] {
  --c-bg: var(--p-white);
  --c-surface: var(--p-ink-25);
  --c-surface-2: var(--p-ink-50);
  --c-tint: var(--p-ink-25);
  --c-line: var(--p-line);
  --c-line-strong: var(--p-line-strong);
  --c-ink: var(--p-ink-950);
  --c-ink-2: var(--p-ink-700);
  --c-ink-3: var(--p-ink-500);
  --c-ink-4: var(--p-ink-450);
  --c-accent: var(--p-sky-500);
  --c-accent-ink: var(--p-sky-500);
  --c-on-accent: var(--p-white);
  --c-accent-strong: var(--p-sky-600);
  --c-accent-soft: var(--p-sky-50);
  --c-focus: var(--p-sky-500);
  --c-ring: var(--p-sky-ring);
  --c-primary: var(--p-ink-950);
  --c-on-primary: var(--p-white);
  --c-brand-field: var(--p-sky-500);
  --c-on-brand-field: var(--p-white);

  /* Verdicts: the hue for dots and meters, -ink for chip text, -soft for the chip tint. */
  --c-verified: var(--p-green-600);
  --c-on-verified: var(--p-white);
  --c-verified-soft: var(--p-green-tint);
  --c-verified-ink: var(--p-green-700);
  --c-partial: var(--p-ink-400);
  --c-not-tested: var(--p-amber-700);
  --c-on-not-tested: var(--p-white);
  --c-not-tested-soft: var(--p-amber-tint);
  --c-not-tested-ink: var(--p-amber-700);
  --c-not-tested-mark: var(--p-amber-700);
  --c-unverified: var(--p-ink-500);
  --c-unverified-fill: var(--p-ink-500);
  --c-on-unverified: var(--p-white);
  --c-unverified-soft: var(--p-ink-50);
  --c-unverified-ink: var(--p-ink-700);
  --c-failed: var(--p-red-600);
  --c-on-failed: var(--p-white);
  --c-failed-soft: var(--p-red-tint);
  --c-failed-ink: var(--p-red-700);
  --c-unmeasured: var(--p-line-strong);
  --c-ran: var(--p-green-line);
  --c-unran-line: var(--p-amber-line);
  color-scheme: light;
}

[data-theme="dark"] {
  --c-bg: var(--p-ink-950);
  --c-surface: var(--p-dark-sunken);
  --c-surface-2: var(--p-dark-raised);
  --c-tint: var(--p-dark-sunken);
  --c-line: var(--p-dark-line);
  --c-line-strong: var(--p-dark-line-strong);
  --c-ink: var(--p-ink-25);
  --c-ink-2: var(--p-dark-ink-2);
  --c-ink-3: var(--p-ink-400);
  --c-ink-4: var(--p-ink-500);
  --c-accent: var(--p-sky-400);
  --c-accent-ink: var(--p-sky-400);
  --c-on-accent: var(--p-ink-950);
  --c-accent-strong: var(--p-sky-500);
  --c-accent-soft: var(--p-dark-raised);
  --c-focus: var(--p-sky-400);
  --c-ring: var(--p-sky-ring);
  --c-primary: var(--p-ink-25);
  --c-on-primary: var(--p-ink-950);
  --c-brand-field: var(--p-sky-500);
  --c-on-brand-field: var(--p-white);

  --c-verified: var(--p-green-400);
  --c-on-verified: var(--p-ink-950);
  --c-verified-soft: var(--p-green-tint-dark);
  --c-verified-ink: var(--p-green-400);
  --c-partial: var(--p-ink-500);
  --c-not-tested: var(--p-amber-400);
  --c-on-not-tested: var(--p-ink-950);
  --c-not-tested-soft: var(--p-amber-tint-dark);
  --c-not-tested-ink: var(--p-amber-400);
  --c-not-tested-mark: var(--p-amber-400);
  --c-unverified: var(--p-ink-400);
  --c-unverified-fill: var(--p-ink-500);
  --c-on-unverified: var(--p-ink-25);
  --c-unverified-soft: var(--p-grey-tint-dark);
  --c-unverified-ink: var(--p-dark-ink-2);
  --c-failed: var(--p-red-400);
  --c-on-failed: var(--p-ink-950);
  --c-failed-soft: var(--p-red-tint-dark);
  --c-failed-ink: var(--p-red-400);
  --c-unmeasured: var(--p-dark-line-strong);
  --c-ran: var(--p-green-tint-dark);
  --c-unran-line: var(--p-amber-line-dark);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0.01ms;
    --d-strike: 0.01ms;
    --d-base: 0.01ms;
    --d-slow: 0.01ms;
  }
}