/* Pageflow design tokens. Source: the price calculator, 2026-10-26.
   Load this first, then components.css. Nothing else sets a colour, a font or a radius. */

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

:root {
  /* colour: one ink, one background, greys as ink at an opacity */
  --bg: oklch(1 0 0);
  --bg-soft: #fafafa;          /* off-white option, so white cards stand out. Turn on with <html data-bg="soft">. */
  --ink: oklch(0.18 0 0);
  --card: oklch(1 0 0);
  --ink-70: color-mix(in oklab, var(--ink) 70%, transparent);
  --ink-50: color-mix(in oklab, var(--ink) 50%, transparent);
  --ink-30: color-mix(in oklab, var(--ink) 30%, transparent);
  --ink-12: color-mix(in oklab, var(--ink) 12%, transparent);
  --ink-07: color-mix(in oklab, var(--ink)  7%, transparent);
  --ink-04: color-mix(in oklab, var(--ink)  4%, transparent);

  /* brand: Pageflow teal and magenta. For the logo mark, score rings and one accent per page. Never for text. */
  --brand-teal: #21bec7;
  --brand-magenta: #ed0180;
  --brand-gradient: linear-gradient(105deg, var(--brand-teal) 8%, var(--brand-magenta) 92%);
  /* brand for words: darker shades that pass contrast. Eyebrows only. Teal 5.7:1, magenta 5.9:1 on white. */
  --brand-teal-text: #107178;
  --brand-magenta-text: #c40069;
  /* the page's one brand colour: step numbers and the selected card. Teal unless the page picks magenta. */
  --brand-text: var(--brand-teal-text);
  /* brand tints: a page or section background with a touch of the brand. White cards sit on top. */
  --bg-teal: #f4f6f6;
  --bg-magenta: #f7f5f5;
  /* logo colours, locked 2026-10-29. Only inside the logo files. */
  --logo-ink: #0b0b0c;         /* the P and "page" */
  --logo-teal: #107178;        /* the bars and "flow", on light */
  --logo-teal-on-ink: #21bec7; /* the bars and "flow", on ink */
  --accent: var(--brand-teal);
  --accent-bg: color-mix(in oklab, var(--brand-teal) 12%, transparent);

  /* status colours. The exact ring and meter colours from the scan pages. */
  --good: #3fd39a;
  --warn: #f0b04a;
  --bad:  #ff6b70;
  /* darker text variants: the ring colours fail contrast as text on white */
  --good-text: color-mix(in oklab, var(--good) 70%, var(--ink));
  --warn-text: color-mix(in oklab, var(--warn) 65%, var(--ink));
  --bad-text:  color-mix(in oklab, var(--bad)  75%, var(--ink));
  --good-bg: color-mix(in oklab, var(--good) 14%, transparent);
  --warn-bg: color-mix(in oklab, var(--warn) 16%, transparent);
  --bad-bg:  color-mix(in oklab, var(--bad)  14%, transparent);

  /* type */
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --text-h1: clamp(34px, 6vw, 60px);
  --text-h2: clamp(24px, 3.4vw, 34px);
  --text-big: 44px;            /* a number that is the point of the panel */
  --text-lead: 17px;
  --text-body: 16px;
  --text-ui: 14px;             /* buttons, controls, card titles */
  --text-small: 13.5px;        /* card descriptions */
  --text-label: 12px;          /* mono eyebrows and labels, uppercase */
  --text-hint: 13px;           /* mono hints and prices */
  --tracking-h1: -1.5px;
  --tracking-h2: -0.8px;
  --tracking-label: .04em;
  --leading-tight: 1.04;
  --leading-body: 1.5;

  /* space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 44px; --s-9: 60px; --s-10: 72px;
  --gutter: 20px;
  --measure: 1040px;           /* page width */
  --measure-text: 560px;       /* a paragraph never runs wider */

  /* shape */
  --radius: 14px;              /* cards, menus, notes */
  --radius-lg: 20px;           /* panels */
  --radius-sm: 9px;            /* menu items, inputs */
  --radius-tile: 7px;          /* logo tiles */
  --pill: 999px;               /* buttons, selects, steppers */
  --hairline: 1px solid var(--ink-12);
  --hairline-soft: 1px solid var(--ink-07);

  /* depth: shadows are ink at an opacity, never grey */
  --shadow-card: 0 1px 2px var(--ink-07);
  --shadow-menu: 0 12px 32px -12px var(--ink-30), 0 2px 6px var(--ink-07);
  --shadow-panel: 0 20px 50px -30px var(--ink-30);

  /* motion */
  --fast: .15s;
  --ease: ease-out;
}

/* background option: white is the default, soft is off-white, teal and magenta are brand tints.
   Pick one per page. A tint also turns the eyebrows that brand colour.
   Dark mode wins over it, because the rules below come later. */
:root[data-bg="soft"] { --bg: var(--bg-soft); }
:root[data-bg="teal"] { --bg: var(--bg-teal); --eyebrow: var(--brand-teal-text); }
:root[data-bg="magenta"] { --bg: var(--bg-magenta); --eyebrow: var(--brand-magenta-text); --brand-text: var(--brand-magenta-text); }
/* magenta as the page's brand colour on a white or soft page */
:root[data-brand="magenta"] { --brand-text: var(--brand-magenta-text); }

/* dark: same system, ink and background swapped. Tiles stay white so brand marks keep their colour. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(0.16 0 0);
    --ink: oklch(0.96 0 0);
    --card: oklch(0.19 0 0);
    --good-text: var(--good); --warn-text: var(--warn); --bad-text: var(--bad);
    --brand-teal-text: var(--brand-teal); --brand-magenta-text: #f23896;
    --bg-teal: color-mix(in oklab, var(--brand-teal) 8%, oklch(0.16 0 0));
    --bg-magenta: color-mix(in oklab, var(--brand-magenta) 8%, oklch(0.16 0 0));
  }
}
:root[data-theme="dark"] {
  --bg: oklch(0.16 0 0);
  --ink: oklch(0.96 0 0);
  --card: oklch(0.19 0 0);
  --good-text: var(--good); --warn-text: var(--warn); --bad-text: var(--bad);
  --brand-teal-text: var(--brand-teal); --brand-magenta-text: #f23896;
  --bg-teal: color-mix(in oklab, var(--brand-teal) 8%, oklch(0.16 0 0));
  --bg-magenta: color-mix(in oklab, var(--brand-magenta) 8%, oklch(0.16 0 0));
}