/* ============================================================
   Pagelove Design System — shared design tokens

   Two layers. The first is the design guide's light theme, under the
   guide's own names: https://plus-jade-0262.onpagelove.com/ is the
   source of truth for tokens across Pagelove. The second is the
   console's own tokens, which name a guide token wherever they mean
   the same thing, so each value is decided once.

   console/tests/storybook-tokens.test.mjs pins the first layer to a
   copy of the guide's stylesheet. Spec:
   docs/superpowers/specs/2026-10-22-storybook-alignment-design.md
   ============================================================ */

/* ---- The design guide's light theme --------------------------
   Copied from the guide's stylesheet on 22 October 2026. Change a
   value here only when the guide changes it. */
:root {
  --color-polo-blue-0: #fff;
  --color-polo-blue-50: #f8fafc;
  --color-polo-blue-100: #f1f5f9;
  --color-polo-blue-200: #e2e8f0;
  --color-polo-blue-300: #cbd5e1;
  --color-polo-blue-400: #94a3b8;
  --color-polo-blue-500: #64748b;
  --color-polo-blue-600: #475569;
  --color-polo-blue-700: #334155;
  --color-polo-blue-800: #1e293b;
  --color-polo-blue-900: #0f172a;
  --color-polo-blue-950: #020617;
  --color-polo-blue-1000: #000208;
  --color-purple-50: #f1f4fc;
  --color-purple-100: #e6eaf9;
  --color-purple-200: #ced5f2;
  --color-purple-300: #b6bfeb;
  --color-purple-400: #999fe0;
  --color-purple-500: #7f80d5;
  --color-purple-600: #6c66c5;
  --color-purple-700: #5c55ad;
  --color-purple-800: #4c478c;
  --color-purple-900: #413f70;
  --color-purple-950: #272541;
  --color-olive-50: #fafbf8;
  --color-olive-100: #f5f6f3;
  --color-olive-200: #e9e7e2;
  --color-olive-300: #d9d7ce;
  --color-olive-400: #aeaa98;
  --color-olive-500: #7f7a65;
  --color-olive-600: #666550;
  --color-olive-700: #494737;
  --color-olive-800: #2c2821;
  --color-olive-900: #1f1d14;
  --color-olive-950: #0e0c07;
  --color-old-rose-50: #faf6f6;
  --color-old-rose-100: #f5efee;
  --color-old-rose-200: #e8dbda;
  --color-old-rose-300: #dbc7c6;
  --color-old-rose-400: #c7a7a5;
  --color-old-rose-500: #af8584;
  --color-old-rose-600: #976768;
  --color-old-rose-700: #7d5355;
  --color-old-rose-800: #6a474a;
  --color-old-rose-900: #5c3f42;
  --color-old-rose-950: #312021;
  --color-hot-pink-50: #fef1f9;
  --color-hot-pink-100: #fee5f5;
  --color-hot-pink-200: #ffcbec;
  --color-hot-pink-300: #ffa1da;
  --color-hot-pink-400: #ff66bf;
  --color-hot-pink-500: #fa3aa4;
  --color-hot-pink-600: #ea1882;
  --color-hot-pink-700: #cc0a66;
  --color-hot-pink-800: #a80c54;
  --color-hot-pink-900: #8c0f49;
  --color-hot-pink-950: #560128;
  --color-neon-carrot-50: #fff8ed;
  --color-neon-carrot-100: #ffefd4;
  --color-neon-carrot-200: #ffdba8;
  --color-neon-carrot-300: #ffc071;
  --color-neon-carrot-400: #ff9d3c;
  --color-neon-carrot-500: #fe7d11;
  --color-neon-carrot-600: #ef6107;
  --color-neon-carrot-700: #c64808;
  --color-neon-carrot-800: #9d390f;
  --color-neon-carrot-900: #7e3110;
  --color-neon-carrot-950: #441606;
  --color-cornflower-blue-50: #eef6ff;
  --color-cornflower-blue-100: #daeaff;
  --color-cornflower-blue-200: #bddbff;
  --color-cornflower-blue-300: #90c6ff;
  --color-cornflower-blue-400: #59a6ff;
  --color-cornflower-blue-500: #3584fc;
  --color-cornflower-blue-600: #1f64f1;
  --color-cornflower-blue-700: #174ede;
  --color-cornflower-blue-800: #1940b4;
  --color-cornflower-blue-900: #1a3a8e;
  --color-cornflower-blue-950: #152556;
  --color-malachite-50: #f0fdf0;
  --color-malachite-100: #ddfbdf;
  --color-malachite-200: #bdf5c1;
  --color-malachite-300: #89ec91;
  --color-malachite-400: #4dd959;
  --color-malachite-500: #27c035;
  --color-malachite-600: #1a9f26;
  --color-malachite-700: #187d22;
  --color-malachite-800: #186320;
  --color-malachite-900: #16511d;
  --color-malachite-950: #062d0b;
  --color-torch-red-50: #fff1f2;
  --color-torch-red-100: #ffe0e1;
  --color-torch-red-200: #ffc6c9;
  --color-torch-red-300: #ff9fa4;
  --color-torch-red-400: #ff676e;
  --color-torch-red-500: #fb2c36;
  --color-torch-red-600: #e91923;
  --color-torch-red-700: #c4111a;
  --color-torch-red-800: #a21219;
  --color-torch-red-900: #86161b;
  --color-torch-red-950: #490609;
  --gradient-purple-storm: linear-gradient(to left, var(--color-olive-600) 0%, var(--color-purple-600) 100%);
  --gradient-soft-bloom: linear-gradient(to left, var(--color-old-rose-300) 0%, var(--color-polo-blue-300) 100%);
  --gradient-dawn-bloom: linear-gradient(to left, var(--color-old-rose-300) 0%, var(--color-purple-300) 100%);
  --gradient-sky-whisper: linear-gradient(to left, var(--color-polo-blue-0) 0%, var(--color-polo-blue-200) 25%, var(--color-polo-blue-200) 75%, var(--color-polo-blue-0) 100%);
  --space-0: 0px;
  --space-100: 8px;
  --space-150: 12px;
  --space-200: 16px;
  --space-250: 20px;
  --space-300: 24px;
  --space-400: 32px;
  --space-500: 40px;
  --space-600: 48px;
  --space-800: 64px;
  --space-1000: 80px;
  --space-1200: 96px;
  --space-1400: 112px;
  --space-1600: 128px;
  --space-1800: 144px;
  --space-2000: 160px;
  --space-025: 2px;
  --space-050: 4px;
  --space-075: 6px;
  --font-family-brand: "Source Serif Pro", "Source Serif 4", Georgia, serif;
  --font-family-secondary: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-family-code: "Fira Code", ui-monospace, Menlo, Consolas, monospace;
  --font-weight-400: 400;
  --font-weight-450: 450;
  --font-weight-500: 500;
  --font-size-50: 10px;
  --font-size-100: 12px;
  --font-size-150: 14px;
  --font-size-200: 16px;
  --font-size-250: 18px;
  --font-size-300: 20px;
  --font-size-350: 24px;
  --font-size-400: 28px;
  --font-size-450: 32px;
  --font-size-500: 36px;
  --font-size-550: 40px;
  --font-size-600: 44px;
  --font-size-650: 48px;
  --font-size-700: 56px;
  --font-size-750: 64px;
  --font-size-800: 72px;
  --font-size-850: 80px;
  --font-size-900: 88px;
  --font-size-950: 96px;
  --line-height-25: 6px;
  --line-height-50: 8px;
  --line-height-75: 10px;
  --line-height-100: 12px;
  --line-height-125: 14px;
  --line-height-150: 16px;
  --line-height-175: 18px;
  --line-height-200: 20px;
  --line-height-225: 22px;
  --line-height-250: 24px;
  --line-height-275: 26px;
  --line-height-300: 28px;
  --line-height-325: 30px;
  --line-height-350: 32px;
  --line-height-375: 34px;
  --line-height-400: 36px;
  --line-height-425: 40px;
  --line-height-450: 42px;
  --line-height-475: 44px;
  --line-height-500: 48px;
  --line-height-525: 50px;
  --line-height-550: 52px;
  --line-height-575: 56px;
  --line-height-600: 58px;
  --line-height-625: 60px;
  --line-height-650: 64px;
  --line-height-675: 66px;
  --line-height-700: 68px;
  --line-height-725: 72px;
  --line-height-750: 74px;
  --line-height-775: 76px;
  --line-height-800: 80px;
  --line-height-825: 82px;
  --line-height-850: 84px;
  --line-height-875: 88px;
  --line-height-900: 90px;
  --line-height-925: 92px;
  --line-height-950: 96px;
  --line-height-975: 98px;
  --line-height-1000: 104px;
  --line-height-1025: 106px;
  --letter-spacing-100: -.02em;
  --letter-spacing-200: -.04em;
  --letter-spacing-300: -.06em;
  --motion-duration-hover: .3s;
  --motion-duration-skeleton: 1s;
  --motion-duration-exit: .5s;
  --motion-duration-spin: .8s;
  --motion-easing-standard: ease-in-out;
  --motion-easing-spin: cubic-bezier(.6, .4, .4, .6);
  --motion-blur-exit: 4px;
  --grid-website-xxs-columns: 4;
  --grid-website-xxs-gutter: var(--space-200);
  --grid-website-xxs-margin: var(--space-200);
  --grid-website-xs-columns: 8;
  --grid-website-xs-gutter: var(--space-200);
  --grid-website-xs-margin: var(--space-400);
  --grid-website-s-columns: 8;
  --grid-website-s-gutter: var(--space-200);
  --grid-website-s-margin: var(--space-400);
  --grid-website-m-columns: 12;
  --grid-website-m-gutter: var(--space-300);
  --grid-website-m-margin: var(--space-800);
  --grid-website-l-columns: 12;
  --grid-website-l-gutter: var(--space-300);
  --grid-website-l-margin: var(--space-800);
  --grid-console-xxs-columns: 4;
  --grid-console-xxs-gutter: var(--space-200);
  --grid-console-xxs-margin: var(--space-200);
  --grid-console-xs-columns: 8;
  --grid-console-xs-gutter: var(--space-200);
  --grid-console-xs-margin: var(--space-200);
  --grid-console-s-columns: 8;
  --grid-console-s-gutter: var(--space-200);
  --grid-console-s-margin: var(--space-200);
  --grid-console-m-columns: 12;
  --grid-console-m-gutter: var(--space-200);
  --grid-console-m-margin: var(--space-200);
  --grid-console-l-columns: 12;
  --grid-console-l-gutter: var(--space-200);
  --grid-console-l-margin: var(--space-200);
  --grid-console-xl-columns: 12;
  --grid-console-xl-gutter: var(--space-200);
  --grid-console-xl-margin: var(--space-200);
}

:root {
  --background-brand-light: var(--color-olive-50);
  --background-brand-regular: var(--color-olive-200);
  --background-brand-strong: var(--color-olive-400);
  --background-danger-light: var(--color-torch-red-50);
  --background-danger-regular: var(--color-torch-red-200);
  --background-danger-strong: var(--color-torch-red-400);
  --background-disabled: var(--color-polo-blue-500);
  --background-discovery-light: var(--color-purple-50);
  --background-discovery-regular: var(--color-purple-200);
  --background-discovery-strong: var(--color-purple-400);
  --background-elevation-light: var(--color-polo-blue-0);
  --background-elevation-regular: var(--color-polo-blue-100);
  --background-elevation-strong: var(--color-polo-blue-200);
  --background-information-light: var(--color-cornflower-blue-50);
  --background-information-regular: var(--color-cornflower-blue-200);
  --background-information-strong: var(--color-cornflower-blue-400);
  --background-neutral-hovered: var(--color-polo-blue-50);
  --background-neutral-pressed: var(--color-polo-blue-100);
  --background-neutral-selected: var(--color-polo-blue-50);
  --background-success-light: var(--color-malachite-50);
  --background-success-regular: var(--color-malachite-200);
  --background-success-strong: var(--color-malachite-400);
  --background-surface-light: var(--color-polo-blue-0);
  --background-surface-regular: var(--color-polo-blue-50);
  --background-surface-strong: var(--color-polo-blue-100);
  --background-warning-light: var(--color-neon-carrot-50);
  --background-warning-regular: var(--color-neon-carrot-200);
  --background-warning-strong: var(--color-neon-carrot-400);
  --border-brand: var(--color-olive-500);
  --border-danger: var(--color-torch-red-200);
  --border-danger-light: var(--color-torch-red-200);
  --border-danger-strong: var(--color-torch-red-600);
  --border-disabled: var(--color-polo-blue-100);
  --border-discovery: var(--color-purple-200);
  --border-focused: var(--color-cornflower-blue-400);
  --border-information: var(--color-cornflower-blue-200);
  --border-inverse: var(--color-polo-blue-700);
  --border-light: var(--color-polo-blue-100);
  --border-regular: var(--color-polo-blue-300);
  --border-selected: var(--color-cornflower-blue-600);
  --border-strong: var(--color-polo-blue-400);
  --border-success: var(--color-malachite-200);
  --border-warning: var(--color-neon-carrot-200);
  --button-borderless-icon-default: var(--color-polo-blue-600);
  --button-borderless-icon-disabled: var(--color-polo-blue-400);
  --button-borderless-icon-hovered: var(--color-polo-blue-800);
  --button-borderless-icon-pressed: var(--color-polo-blue-900);
  --button-borderless-icon-selected: var(--color-polo-blue-900);
  --button-borderless-text-default: var(--color-polo-blue-600);
  --button-borderless-text-disabled: var(--color-polo-blue-400);
  --button-borderless-text-hovered: var(--color-polo-blue-800);
  --button-borderless-text-pressed: var(--color-polo-blue-900);
  --button-borderless-text-selected: var(--color-polo-blue-900);
  --button-gradient-bg-default: var(--color-polo-blue-0);
  --button-gradient-bg-disabled: var(--color-polo-blue-0);
  --button-gradient-bg-hovered: var(--color-polo-blue-50);
  --button-gradient-bg-pressed: var(--color-polo-blue-100);
  --button-gradient-bg-selected: var(--color-polo-blue-100);
  --button-regular-default: var(--color-polo-blue-100);
  --button-regular-disabled: var(--color-polo-blue-50);
  --button-regular-hovered: var(--color-polo-blue-50);
  --button-regular-pressed: var(--color-polo-blue-100);
  --button-regular-text: var(--color-polo-blue-800);
  --button-secondary-icon-default: var(--color-polo-blue-600);
  --button-secondary-icon-disabled: var(--color-polo-blue-500);
  --button-secondary-icon-hovered: var(--color-polo-blue-950);
  --button-secondary-icon-pressed: var(--color-polo-blue-1000);
  --button-secondary-icon-selected: var(--color-polo-blue-900);
  --button-secondary-text-default: var(--color-polo-blue-600);
  --button-secondary-text-disabled: var(--color-polo-blue-500);
  --button-secondary-text-hovered: var(--color-polo-blue-800);
  --button-secondary-text-pressed: var(--color-polo-blue-900);
  --button-secondary-text-selected: var(--color-polo-blue-900);
  --button-strong-default: var(--color-polo-blue-800);
  --button-strong-disabled: var(--color-polo-blue-300);
  --button-strong-hovered: var(--color-polo-blue-900);
  --button-strong-pressed: var(--color-polo-blue-950);
  --button-strong-text: var(--color-polo-blue-0);
  --icon-brand: var(--color-olive-700);
  --icon-danger: var(--color-torch-red-700);
  --icon-disabled: var(--color-polo-blue-400);
  --icon-discovery: var(--color-purple-700);
  --icon-information: var(--color-cornflower-blue-700);
  --icon-inverse: var(--color-polo-blue-50);
  --icon-light: var(--color-polo-blue-500);
  --icon-regular: var(--color-polo-blue-700);
  --icon-selected: var(--color-polo-blue-950);
  --icon-strong: var(--color-polo-blue-950);
  --icon-success: var(--color-malachite-700);
  --icon-warning: var(--color-neon-carrot-700);
  --link-icon-default: var(--color-cornflower-blue-600);
  --link-icon-hover: var(--color-cornflower-blue-700);
  --link-icon-inverse: var(--color-cornflower-blue-300);
  --link-icon-pressed: var(--color-cornflower-blue-800);
  --link-text-default: var(--color-cornflower-blue-600);
  --link-text-hover: var(--color-cornflower-blue-700);
  --link-text-pressed: var(--color-cornflower-blue-800);
  --link-text-visited: var(--color-cornflower-blue-500);
  --text-brand: var(--color-olive-700);
  --text-danger: var(--color-torch-red-700);
  --text-disabled: var(--color-polo-blue-400);
  --text-discovery: var(--color-purple-700);
  --text-information: var(--color-cornflower-blue-700);
  --text-inverse: var(--color-polo-blue-50);
  --text-light: var(--color-polo-blue-500);
  --text-regular: var(--color-polo-blue-700);
  --text-selected: var(--color-polo-blue-950);
  --text-strong: var(--color-polo-blue-950);
  --text-success: var(--color-malachite-700);
  --text-warning: var(--color-neon-carrot-700);
}

/* ---- The console's own tokens ---------------------------- */

/* ---- Colours ---- */
/* ============================================================
   Pagelove — Color tokens
   A near-monochrome slate ramp, a warm brand gradient, and a
   legacy sky-blue ramp kept only for pages that still ask for it.
   The slate ramp names the guide's polo-blue steps. It used to be
   pagelove.com's own slate, a few units off the guide's; each step
   now points at the nearest guide step, so there is one slate.
   ============================================================ */

:root {
  /* ---- Neutral (Slate) — the workhorse ramp -------------------- */
  --colours-neutral-100: var(--color-polo-blue-50); /* page background, light text on dark */
  --colours-neutral-200: var(--color-polo-blue-200); /* hairline borders, dividers */
  --colours-neutral-300: var(--color-polo-blue-400); /* subtle / placeholder text, disabled */
  --colours-neutral-400: var(--color-polo-blue-600); /* secondary text, captions */
  --colours-neutral-500: var(--color-polo-blue-800); /* primary surfaces (buttons), strong text */
  --colours-neutral-600: var(--color-polo-blue-950); /* near-black: display headings, pressed */

  /* ---- Brand — the site's gradient and its two stops ----------
     pagelove.com carries all of its colour in one gradient rather
     than an accent ramp: purple at the start, olive at the end.
     Both stops are useful on their own, so they are named here.
     Source: css/foundations.css on pagelove.com (--gradient-main). */
  --colours-brand-purple: #7B6BB5; /* gradient start; solid accent on the site's hero */
  --colours-brand-olive:  #646444; /* gradient end */
  --colours-brand-warm:   #65644A; /* the site's warm text colour */
  --colours-brand-lilac:  #9FABDD; /* the site's secondary-button border */

  --gradient-main: linear-gradient(95.1deg, #7B6BB5 0%, #646444 100%);

  /* The shared hover glow. The site paints this behind a button, blurred
     and at 60% opacity, for both its primary and secondary variants. */
  --colours-glow-start: #6D66CB;
  --colours-glow-end:   #9F6467;
  --gradient-glow: linear-gradient(157.71deg, #6D66CB 2.31%, #9F6467 97.12%);
  --blur-glow:     11.5px;
  --opacity-glow:  0.6;

  /* A hairline that dissolves at both ends. */
  --gradient-divider: linear-gradient(
    90deg,
    rgba(226, 232, 240, 0)   0%,
    rgba(226, 232, 240, 1)  15%,
    rgba(226, 232, 240, 1)  50%,
    rgba(226, 232, 240, 1)  85%,
    rgba(226, 232, 240, 0)  95%
  );

  /* ---- Blue (Sky) — legacy ramp ------------------------------
     Nothing in the console reaches for these any more. The signed-out
     landing page (index.css) and the WebDAV browser's own defaults
     still do, so the ramp stays defined until those follow. */
  --colours-blue-100: #F0F9FF;
  --colours-blue-200: #B8E6FE;
  --colours-blue-300: #00BCFF;
  --colours-blue-400: #0084D1; /* primary accent / links-in-color */
  --colours-blue-500: #00598A;
  --colours-blue-600: #052F4A;

  /* The site's background.mask: a white surface at 70% meant to sit over
     content behind a backdrop blur, used for sticky bars and overlays. */
  --colours-background-mask: rgba(255, 255, 255, 0.7);

  /* ---- Pure -------------------------------------------------- */
  --colours-white: var(--color-polo-blue-0);
  --colours-black: #000000;

  /* =========================================================
     SEMANTIC ALIASES — reach for these in product code
     ========================================================= */

  /* Surfaces */
  --surface-page:    var(--colours-neutral-100);
  --surface-card:    var(--colours-white);
  --surface-raised:  var(--colours-white);
  --surface-inverse: var(--colours-neutral-600);
  --surface-sunken:  var(--colours-neutral-200);

  /* Translucent surfaces (frosted) — used on forms & footers */
  --surface-glass:        rgba(248, 250, 252, 0.80);
  --surface-glass-strong: rgba(255, 255, 255, 0.72);

  /* Text */
  --text-display: var(--colours-neutral-600); /* serif headlines */
  --text-body:    var(--colours-neutral-500);
  --text-muted:   var(--colours-neutral-400);
  --text-subtle:  var(--colours-neutral-300);
  --text-link:    var(--colours-neutral-600);
  --text-accent:  var(--colours-neutral-500);
  --text-warm:    var(--colours-brand-warm); /* identifiers, references */

  /* Borders & lines */
  --border-subtle: var(--colours-neutral-200);
  --border-focus:  var(--border-focused);

  /* Accent — slate, the same colour the site gives its primary button.
     Colour on the site arrives as a gradient, never as a flat accent
     hue, so the flat accent here is a neutral and the gradient above
     does the expressive work. */
  --accent:        var(--colours-neutral-500);
  --accent-hover:  var(--colours-neutral-400);
  --accent-soft:   var(--colours-neutral-100);

  /* Interactive — primary action (dark slate) */
  --btn-primary-bg:        var(--colours-neutral-500);
  --btn-primary-bg-hover:  var(--colours-neutral-400);
  --btn-primary-bg-active: var(--colours-neutral-600);
  --btn-primary-fg:        var(--colours-neutral-100);

  /* Focus ring */
  --ring: var(--border-focused);

  /* ---- Washes of the accent ----------------------------------
     The only way to reach a tint of the accent. A rule that writes its
     own rgba() of it puts a second source of truth in the ramp. */
  --accent-wash:        color-mix(in srgb, var(--accent) 4%, transparent);
  --accent-tint:        color-mix(in srgb, var(--accent) 7%, transparent);
  --accent-tint-strong: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line:        color-mix(in srgb, var(--accent) 40%, transparent);
  --accent-glow:        color-mix(in srgb, var(--accent) 10%, transparent);

  /* ---- Reference (warm) --------------------------------------
     The gradient's far end, for identifiers and references — the one
     second colour on these surfaces that is not slate. */
  --ref:      var(--colours-brand-warm);
  --ref-tint: color-mix(in srgb, var(--ref) 8%, transparent);
  --ref-line: color-mix(in srgb, var(--ref) 35%, transparent);

  /* ---- Status -------------------------------------------------
     Each names the guide's status colour. --danger is the colour of a
     destructive ACTION: the outline on a delete. --danger-text is for a
     sentence that reports a failure. */
  --danger:      var(--color-torch-red-600);
  --danger-tint: color-mix(in srgb, var(--danger) 8%, transparent);
  --danger-line: color-mix(in srgb, var(--danger) 45%, transparent);
  --danger-text: var(--text-danger);

  --success:      var(--text-success);  /* a save landed */
  --success-text: var(--success);

  --warning:      var(--text-warning);  /* unsaved changes, a conflict */
  --warning-line: color-mix(in srgb, var(--warning) 35%, transparent);

  /* ---- The site's hover glow, as a box-shadow ----------------
     The site paints --gradient-glow behind a button, blurred at 60%
     opacity, using two pseudo-elements: one for the glow and one for the
     solid face, because a box's own background always paints above its
     children. Our buttons carry bare text with no wrapped label span, so
     a solid face on ::after would cover the label. A two-colour halo
     reads the same from the outside — the glow only ever shows beyond
     the button's edge anyway — and needs no markup at all. */
  --glow:
    0 3px 14px -3px color-mix(in srgb, var(--colours-glow-start) 50%, transparent),
    0 8px 26px -8px color-mix(in srgb, var(--colours-glow-end) 50%, transparent);
  --glow-soft:
    0 2px 10px -3px color-mix(in srgb, var(--colours-glow-start) 32%, transparent),
    0 6px 18px -8px color-mix(in srgb, var(--colours-glow-end) 32%, transparent);
}

/* ---- Typography scale (families/weights/sizes; no @font-face yet) ---- */
/* ============================================================
   Pagelove — Typography tokens
   Two families do all the work:
     • Source Serif Pro — expressive display headlines only
     • Inter            — every piece of UI text, body & labels
     • Fira Code        — code, technical/mono accents
   Scale + metrics mirror the Figma "Typography" variable collection,
   which defines responsive headline sizes for desktop/tablet/mobile.
   ============================================================ */

:root {
  /* ---- Families ------------------------------------------------ */
  --font-display: "Source Serif Pro", "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Fira Code", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Figma aliases */
  --family-primary:   var(--font-display);
  --family-secondary: var(--font-sans);

  /* ---- Weights ------------------------------------------------ */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Display / Headline — Source Serif Pro, regular ---------
     Responsive: desktop → tablet → mobile.
     letter-spacing is tight & negative; line-height < font-size. */
  --fs-headline-d-primary:   96px;  --lh-headline-d-primary:   84px;  --ls-headline-d-primary:   -4px;
  --fs-headline-d-secondary: 56px;  --lh-headline-d-secondary: 48px;  --ls-headline-d-secondary: -2.5px;
  --fs-headline-t-primary:   76px;  --lh-headline-t-primary:   68px;  --ls-headline-t-primary:   -3.5px;
  --fs-headline-t-secondary: 44px;  --lh-headline-t-secondary: 36px;  --ls-headline-t-secondary: -2px;
  --fs-headline-m-primary:   56px;  --lh-headline-m-primary:   48px;  --ls-headline-m-primary:   -2.5px;
  --fs-headline-m-secondary: 32px;  --lh-headline-m-secondary: 24px;  --ls-headline-m-secondary: -1.5px;

  /* ---- Body — Inter regular ----------------------------------- */
  --fs-body:    16px;  --lh-body:    26px;  --ls-body:    -0.4px;

  /* ---- Title — Inter (section/card heads) ---------------------- */
  --fs-title:   16px;  --lh-title:   24px;  --ls-title:   -0.6px;

  /* ---- Label — Inter medium (buttons, nav, inputs) ------------ */
  --fs-label-primary:   16px;  --lh-label-primary:   24px;  --ls-label-primary:   -0.6px;
  --fs-label-secondary: 14px;  --lh-label-secondary: 22px;  --ls-label-secondary: -0.4px;

  /* ---- Caption — Inter (legal, meta, footnotes) --------------- */
  --fs-caption-primary:   14px;  --lh-caption-primary:   22px;  --ls-caption-primary:   -0.2px;
  --fs-caption-secondary: 12px;  --lh-caption-secondary: 20px;  --ls-caption-secondary: -0.2px;
}

/* ---- Spacing, radius, shadow, blur, motion ---- */
/* ============================================================
   Pagelove — Spacing, radius, shadow, blur, motion
   Spacing follows a 4px base grid (observed gaps: 4·8·10·12·16·20·32·64).
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Page gutter — generous side margin on the marketing site */
  --gutter-desktop: 120px;
  --gutter-tablet:  64px;
  --gutter-mobile:  24px;
  --content-max:    1150px;

  /* The site's own responsive grid margin and gutter, at the site's own
     breakpoints: 24px on mobile, 48px on tablet, 64px from 901px up.
     Anything laying content out against the page edge should use these, so
     the console and the site indent by the same amount at each width. */
  --grid-margin: 24px;
  --grid-gutter: 16px;

  /* ---- Radius ------------------------------------------------- */
  --radius-sm:   8px;   /* links / small focus chips */
  --radius-md:   12px;  /* buttons, icon buttons, favicon */
  --radius-lg:   16px;  /* inputs, fields */
  --radius-xl:   24px;  /* large cards */
  --radius-2xl:  32px;  /* feature panels */
  --radius-full: 999px;

  /* ---- Borders ------------------------------------------------ */
  --border-width: 1px;
  --border-hairline: 1px solid var(--border-subtle);

  /* ---- Focus ring (2px slate halo — used across all controls) -- */
  --focus-ring: 0 0 0 2px var(--border-focused);

  /* ---- Shadows — soft, low-contrast, slate-tinted ------------- */
  --shadow-xs:   0 1px 2px rgba(2, 6, 24, 0.05);
  --shadow-sm:   0 1px 3px rgba(2, 6, 24, 0.06), 0 1px 2px rgba(2, 6, 24, 0.04);
  --shadow-md:   0 8px 24px rgba(2, 6, 24, 0.08);
  --shadow-lg:   0 24px 60px rgba(2, 6, 24, 0.12);
  --shadow-inset-border: inset 0 0 0 1px rgba(0, 0, 0, 0.10); /* hairline ring on white cards */
  /* A floating surface (dialog, notice) and a draggable one (tile). */
  --shadow-panel: 0 24px 60px -24px rgba(2, 6, 24, 0.18);
  --shadow-tile:  0 8px 24px -16px rgba(2, 6, 24, 0.18);

  /* ---- Blur (frosted glass) ---------------------------------- */
  --blur-glass:  20px;  /* fields, floating UI */
  --blur-strong: 24px;  /* footer / sticky bars */

  /* ---- Motion ------------------------------------------------- 
     The shared controls use the guide's motion tokens (--motion-*).
     These older ones remain for the few page rules that name them. */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}

/* ---- Figma variables the guide does not name -----------------
   The Figma designs use the guide's palette. Most of their variables
   are guide tokens and come from the first layer. These are the rest:
   Figma names the guide does not have, each pointing at a guide token. */
:root {
  /* Accessible stand-in for Figma's 60% opacity on a completed
     getting-started step. Figma fades the done title and description to
     60% opacity, which drops the description below WCAG AA (2.9:1) on
     white. This is the done description: the guide's text/light,
     which clears 4.5:1. */
  --text-light-done: var(--color-polo-blue-500);

  --old-rose-300: var(--color-old-rose-300);
  /* The dashed frame round the arrival overlay's picture (Figma 662:56932). */
  --hot-pink-400: var(--color-hot-pink-400);

  --background-primary-hovered: var(--background-neutral-hovered);
  --background-secondary-light: var(--background-brand-light);

  /* Host page (Figma: Onboarding, 'Host page' frame). */
  --cornflower-blue-100: var(--color-cornflower-blue-100);

  /* Host page redesign (Figma 916:1316): the sections' titles and the
     host's name. The guide's text/regular is the same colour. */
  --text-section: var(--color-polo-blue-700);
  /* The chosen period's ring in the Upgrade dialog (Figma 936:33067),
     which is the guide's focus colour. */
  --border-focused-strong: var(--border-focused);
  /* A field's border on hover (Storybook border/strong). */
  --border-field-hover: var(--border-strong);
  /* The Host files editor (Figma 921:8790): near-black code, and the dark
     bar's hovered button (button/regular/hovered in that frame). */
  --code-background: var(--color-polo-blue-1000);
  --button-dark-hovered: var(--button-strong-pressed);

  /* Templates modal (Figma: Onboarding, Plan B). */
  --button-primary-background-default: var(--button-strong-default);
  --button-primary-text-default: var(--button-strong-text);
  --purple-100: var(--color-purple-100);

  /* ---- Type styles (Figma text styles) ------------------------- */
  --fs-label-xs: 12px;   --lh-label-xs: 20px;   --ls-label-xs: -0.48px;
  --fs-label-s:  14px;   --lh-label-s:  22px;   --ls-label-s:  -0.56px;
  --fs-body-small: 14px; --lh-body-small: 24px; --ls-body-small: -0.28px;
  --fs-label-m:  16px;   --lh-label-m:  24px;   --ls-label-m:  -0.64px;
  --fs-h3-small: 24px;   --lh-h3-small: 24px;   --ls-h3-small: -0.96px;
  --fs-h2-small: 40px;   --lh-h2-small: 36px;   --ls-h2-small: -1.6px;
  --fs-h3-large: 32px;   --lh-h3-large: 28px;   --ls-h3-large: -1.28px;
  --fs-body-medium: 16px; --lh-body-medium: 26px; --ls-body-medium: -0.32px;

  --gradient-brand-text: linear-gradient(to left, var(--text-brand), var(--icon-discovery));

  /* The headline gradient (Figma style "gradient_3"): purple/600 on the
     left to olive/600 on the right. The onboarding and auth headlines. */
  --purple-600: var(--color-purple-600);
  --olive-600: var(--color-olive-600);
  --gradient-headline: var(--gradient-purple-storm);

  /* The hosts page's glow behind "Start something new" (Figma 925:15852):
     the getting-started glow's stops, at the angle of this frame. */
  --gradient-start-glow: linear-gradient(170.81deg, #FFFFFF 3.1%, #0400FF 36.9%, #FF3D00 57%, #FFFFFF 77.3%);

  /* What a dialog dims the page with (Figma opacity/neutral/800, white): a
     white tint over the page, blurred 2px. */
  --dialog-overlay: color-mix(in srgb, var(--colours-white) 80%, transparent);

  /* The glow behind the 'How to get started' banner (Figma 264:15668).
     Its stops are Figma's own and match nothing in the ramp. */
  --gradient-getting-started-glow: linear-gradient(159.69deg, #FFFFFF 3.1%, #0400FF 36.9%, #FF3D00 57%, #FFFFFF 77.3%);

  /* The glow behind the templates modal (Figma 264:13014). Same stops
     as the getting-started glow, at a different angle. */
  --gradient-templates-glow: linear-gradient(134.89deg, #FFFFFF 3.1%, #0400FF 36.9%, #FF3D00 57%, #FFFFFF 77.3%);

  /* Templates modal panel fills (Figma 256:3708 and 256:3645), each a
     tint over an existing background token rather than a flat colour. */
  --templates-list-surface: color-mix(in srgb, var(--background-primary-hovered) 90%, transparent);
  --templates-detail-surface: color-mix(in srgb, var(--background-elevation-light) 96%, transparent);
}

/* ---- Responsive grid margin (the site's breakpoints) ---- */
@media (min-width: 700px) {
  :root { --grid-margin: 48px; }
}

@media (min-width: 901px) {
  :root { --grid-margin: 64px; --grid-gutter: 24px; }
}