/* The public site's design tokens (it-340, issue #45).
 *
 * The site is style-isolated from the app (D3): its own tree under /static/site/, its own tokens — every custom
 * property here is --mkt-* — and its own class prefix (mkt-). A site page loads none of /static/css/, and an app page
 * none of this; a test pins both directions. Change the site's look here, not in a component: a component file says
 * every length, size, weight, time, layer and color through these (internal/template/site_isolation_test.go fails on a
 * literal), save the proportions of a drawn product picture (components/mock.css), which are the drawing itself.
 *
 * Breakpoints can't be custom properties, so they are written where used — and only these: 479px (a narrow phone),
 * 719px (a phone), 959px (a tablet).
 *
 * Fonts are the site's own copies (D8, fonts/FONTS.md).
 */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/static/site/fonts/BricolageGrotesque-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Flex';
  src: url('/static/site/fonts/RobotoFlex.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Color: brand ─────────────────────────────────────────────── */
  --mkt-purple: #632e74;          /* the dot */
  --mkt-purple-hover: #4e2459;
  --mkt-purple-ink: #4a2258;      /* text on a lilac tint */
  --mkt-orchid: #c58fdb;          /* the dot on dark grounds */
  --mkt-lilac-on-dark: #d9b8e6;   /* eyebrows and icons on dark */
  --mkt-lilac-pale: #ebd3f3;

  /* ── Color: ink and text ──────────────────────────────────────── */
  --mkt-ink: #1a1320;             /* headings, the dark grounds */
  --mkt-ink-2: #2a2030;
  --mkt-text-strong: #3b3142;     /* nav, chips */
  --mkt-text: #4a3f52;            /* body copy */
  --mkt-muted: #6b6072;           /* captions — 5.9:1 on white */
  --mkt-faint: #8a7f91;           /* placeholders inside product pictures only */

  /* ── Color: grounds ───────────────────────────────────────────── */
  --mkt-surface: #ffffff;
  --mkt-tint: #f6f2f8;            /* a tinted section; floating cards sit on it */
  --mkt-tint-strong: #f1e9f5;     /* lilac chips, icon boxes, my chat bubble */
  --mkt-tint-deep: #eadcf1;
  --mkt-neutral: #f6f4f7;         /* a neutral chip */
  --mkt-chrome: #faf8fb;          /* a window's title bar, a field well */
  --mkt-hairline: #f0eaf3;        /* the only lines: dividers inside a card */
  --mkt-rule: #cdbbd6;            /* a flow's connector */
  --mkt-track: #ede6f1;           /* a progress track, an empty step */
  --mkt-ring: #e3cdec;            /* the current step's halo */
  --mkt-quiet: #f1ecf4;           /* their chat bubble, a quiet button inside a picture */
  --mkt-skeleton: #e4dce8;        /* a skeleton line on a drawn page */
  --mkt-box-ring: #b9aec0;        /* an empty checkbox, an empty grid cell */
  --mkt-video-bg: #0f0b12;
  --mkt-video-glow: #3b2547;

  /* ── Color: dark grounds ──────────────────────────────────────── */
  --mkt-dark: var(--mkt-ink);       /* the dark grounds are the ink */
  --mkt-dark-raised: #261d2d;     /* a tile on the dark ground */
  --mkt-dark-well: #322839;       /* a picture's well inside a tile */
  --mkt-dark-chip: #3a2e42;
  --mkt-dark-bubble: #4a3a55;
  --mkt-on-dark: #f6f1f8;
  --mkt-on-dark-muted: #c9bed0;
  --mkt-on-dark-faint: var(--mkt-box-ring);
  --mkt-on-dark-soft: #e9dff0;
  --mkt-on-dark-lead: #d8cde0;    /* a lead paragraph on dark */

  /* ── Color: veils and edges ──────────────────────────────────────── */
  --mkt-veil-on-dark: rgb(255 255 255 / 0.08);   /* a hover, a glow on a dark or purple ground */
  --mkt-edge-on-dark: rgb(255 255 255 / 0.5);    /* an outline button's ring on dark */
  --mkt-edge-swatch: rgb(26 19 32 / 0.1);        /* a light color swatch's outline (the styleguide) */

  /* ── Color: status, inside product pictures ───────────────────── */
  --mkt-green: #1e6b43;   --mkt-green-bg: #e3f1e8;   --mkt-green-dot: #2f8f5b;
  --mkt-amber: #8a5a00;   --mkt-amber-bg: #fbf0d9;
  --mkt-blue: #2b5c9e;    --mkt-blue-bg: #e7eef8;    --mkt-blue-swatch: #4a7bd0;
  --mkt-clay: #a4532c;    --mkt-clay-bg: #f6eee8;
  --mkt-sun: #9a5b00;     --mkt-sun-bg: #fdf1dc;     --mkt-sun-swatch: #c98a1b;
  --mkt-red: #a0391f;
  --mkt-violet-swatch: #8a4fa3;
  --mkt-plum: #8e5ba6;

  /* ── Type ─────────────────────────────────────────────────────── */
  --mkt-font-display: 'Bricolage Grotesque', 'Roboto Flex', system-ui, sans-serif;
  --mkt-font-body: 'Roboto Flex', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mkt-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --mkt-size-hero: clamp(2.875rem, 6.6vw, 5.75rem);     /* 46 → 92 */
  --mkt-size-cta: clamp(2.375rem, 5vw, 4.25rem);        /* 38 → 68 */
  --mkt-size-h2-xl: clamp(2.25rem, 4.6vw, 3.875rem);    /* 36 → 62 */
  --mkt-size-h2: clamp(2.125rem, 4.2vw, 3.375rem);      /* 34 → 54 */
  --mkt-size-h2-sm: clamp(1.875rem, 3.4vw, 2.75rem);    /* 30 → 44 */
  --mkt-size-card-title: clamp(1.75rem, 3vw, 2.375rem); /* 28 → 38 */
  --mkt-size-h3-lg: 1.625rem;
  --mkt-size-h3: 1.375rem;
  --mkt-size-h4: 1.0625rem;
  --mkt-size-lead: clamp(1.125rem, 1.5vw, 1.3125rem);   /* 18 → 21 */
  --mkt-size-body-lg: 1.125rem;
  --mkt-size-body: 1rem;
  --mkt-size-md: 0.9375rem;
  --mkt-size-sm: 0.875rem;
  --mkt-size-xs: 0.8125rem;
  --mkt-size-2xs: 0.75rem;
  --mkt-size-3xs: 0.6875rem;
  --mkt-size-4xs: 0.625rem;                             /* a file badge's letters, inside a picture */
  --mkt-size-body-xl: 1.1875rem;                        /* a step's title, the closing call's paragraph */
  --mkt-size-title-sm: 1.25rem;                         /* the brand's name, a picture's board title */
  --mkt-size-step: 2.75rem;                             /* a step's big number */

  --mkt-weight-regular: 400;
  --mkt-weight-medium: 500;
  --mkt-weight-semibold: 600;
  --mkt-weight-strong: 650;                             /* <b> and <strong> in running text */
  --mkt-weight-bold: 700;
  --mkt-weight-heavy: 800;

  --mkt-leading-display: 0.97;
  --mkt-leading-tight: 1;
  --mkt-leading-snug: 1.05;
  --mkt-leading-title: 1.2;
  --mkt-leading-compact: 1.35;
  --mkt-leading-body: 1.5;
  --mkt-leading-relaxed: 1.6;

  --mkt-tracking-display: -0.04em;
  --mkt-tracking-heading: -0.035em;
  --mkt-tracking-tight: -0.01em;
  --mkt-tracking-label: 0.06em;                         /* small caps: a kicker, a label in a picture */
  --mkt-tracking-eyebrow: 0.1em;

  /* ── Space ────────────────────────────────────────────────────── */
  --mkt-space-px: 1px;
  --mkt-space-0-5: 2px;
  --mkt-space-1: 4px;
  --mkt-space-1-5: 6px;
  --mkt-space-2: 8px;
  --mkt-space-2-5: 10px;
  --mkt-space-3: 12px;
  --mkt-space-3-5: 14px;
  --mkt-space-4: 16px;
  --mkt-space-4-5: 18px;
  --mkt-space-5: 20px;
  --mkt-space-5-5: 22px;
  --mkt-space-6: 24px;
  --mkt-space-7: 28px;
  --mkt-space-8: 32px;
  --mkt-space-9: 36px;
  --mkt-space-10: 40px;
  --mkt-space-12: 48px;
  --mkt-space-14: 56px;
  --mkt-space-16: 64px;
  --mkt-space-18: 72px;
  --mkt-space-20: 80px;
  --mkt-space-22: 88px;
  --mkt-space-24: 96px;
  --mkt-space-28: 112px;
  --mkt-space-36: 144px;

  /* Fluid rhythm: a section, what follows its head, the hero, the closing call, a card's padding. */
  --mkt-gutter: clamp(16px, 4vw, 40px);
  --mkt-section-y: clamp(80px, 10vw, 128px);
  --mkt-strip-y: clamp(56px, 7vw, 88px);               /* under the industries strip */
  --mkt-after-head: clamp(48px, 6vw, 72px);
  --mkt-hero-top: clamp(40px, 6vw, 80px);
  --mkt-hero-bottom: clamp(64px, 8vw, 112px);
  --mkt-cta-y: clamp(88px, 11vw, 144px);
  --mkt-page-y: clamp(48px, 8vw, 112px);               /* a one-card page's room above and below (Sign in) */
  --mkt-page-min: 60vh;                                /* a one-card page's least height, so the footer sits low */
  --mkt-pad-tile: clamp(20px, 3vw, 28px);
  --mkt-pad-card: clamp(24px, 3vw, 36px);
  --mkt-pad-band: clamp(28px, 5vw, 64px);
  --mkt-indent: clamp(0px, 6vw, 72px);                 /* a picture's card set in from its neighbor */
  --mkt-container: 1240px;

  /* ── Size: targets, marks, icons ──────────────────────────────── */
  --mkt-tap: 44px;              /* the smallest thing a finger presses */
  --mkt-control: 54px;          /* a button, a field */
  --mkt-dot-sm: 8px;            /* a status dot */
  --mkt-dot: 10px;              /* an eyebrow's or a badge's dot */
  --mkt-brand-dot: 26px;
  --mkt-brand-dot-sm: 24px;
  --mkt-check-mark: 24px;       /* the circle a list check sits in */
  --mkt-portrait: 144px;        /* a person's photo on About us — its file is twice this */
  --mkt-icon-box-sm: 30px;
  --mkt-icon-box-md: 36px;
  --mkt-icon-box: 40px;
  --mkt-icon-box-lg: 44px;
  --mkt-icon-2xs: 12px;
  --mkt-icon-xs: 14px;
  --mkt-icon-sm: 16px;
  --mkt-icon-md: 18px;
  --mkt-icon-lg: 20px;
  --mkt-icon-xl: 22px;
  --mkt-icon-2xl: 26px;
  --mkt-icon-nudge: 0.2em;      /* an icon set beside a title, down to its first line */
  --mkt-stroke-light: 1.8;
  --mkt-stroke: 2;
  --mkt-stroke-bold: 2.2;
  --mkt-stroke-heavy: 3;

  /* ── Size: lines ──────────────────────────────────────────────── */
  --mkt-line: 1px;              /* a hairline divider */
  --mkt-line-strong: 1.5px;     /* an outline: a button, a field, an empty box */
  --mkt-line-bold: 2px;         /* a focused field, a picked card, the focus ring */
  --mkt-line-heavy: 3px;        /* the carousel's progress line */

  /* ── Size: layout ─────────────────────────────────────────────── */
  /* A wrapping block's narrowest comfortable width (its flex-basis): it stacks below this. */
  --mkt-basis-2xs: 140px;
  --mkt-basis-xs: 200px;
  --mkt-basis-sm: 260px;
  --mkt-basis-md: 320px;
  --mkt-basis-lg: 360px;
  --mkt-basis-xl: 420px;
  --mkt-basis-2xl: 480px;
  --mkt-basis-3xl: 520px;
  --mkt-basis-4xl: 560px;
  /* A text block's widest comfortable line (its max-width). */
  --mkt-measure-xs: 280px;
  --mkt-measure-sm: 480px;
  --mkt-measure-md: 520px;
  --mkt-measure-lg: 672px;
  --mkt-measure-xl: 780px;
  --mkt-measure-2xl: 900px;
  /* A section picture's width (a PNG drawn from the styleguide's sources at exactly this, and twice it). */
  --mkt-picture-width: 574px;
  --mkt-frame-min: 420px;       /* the hosted card form's frame before it says its height (Register) */
  --mkt-autofill-cover: 1000px; /* an inset shadow wider than any field: paints over the browser's autofill colour */

  /* ── Decoration: the purple dots ──────────────────────────────── */
  /* The hero carousel (components/carousel.css): the screen in focus fills the page's column; its neighbors show past
   * it, dimmed, by at least the peek (a phone narrows both). */
  --mkt-carousel-gap: var(--mkt-space-6);
  --mkt-carousel-peek: var(--mkt-space-8);
  /* The room a screen's shadow (--mkt-shadow-hero: 32px down, 80px blur, -16px spread) needs inside the strip, which
   * clips at its own edges — 32px above a screen, 96px below it. */
  --mkt-carousel-shadow-top: var(--mkt-space-8);
  --mkt-carousel-shadow-bottom: var(--mkt-space-24);
  --mkt-carousel-dim: 0.4;          /* a neighbor screen's opacity */
  --mkt-carousel-shrink: 0.95;      /* a neighbor screen's scale */
  --mkt-carousel-pip-on: var(--mkt-space-9);  /* the dot in play, stretched into its clock */
  --mkt-hero-dot: min(46vw, 600px);
  --mkt-hero-dot-right: max(-12vw, -150px);
  --mkt-hero-dot-top: min(-14vw, -60px);
  --mkt-cta-dot: min(60vw, 720px);
  --mkt-cta-dot-right: max(-20vw, -240px);
  --mkt-hatch: 8px;             /* a drop target's diagonal stripes, inside a picture */
  --mkt-hatch-angle: 135deg;
  --mkt-glow: 260px;            /* the featured industry card's glow */
  --mkt-glow-right: -70px;
  --mkt-glow-bottom: -90px;

  /* ── Shape ────────────────────────────────────────────────────── */
  --mkt-radius-2xs: 3px;
  --mkt-radius-xs: 4px;
  --mkt-radius-sm: 8px;
  --mkt-radius-md: 12px;
  --mkt-radius-lg: 16px;
  --mkt-radius-xl: 20px;
  --mkt-radius-2xl: 24px;
  --mkt-radius-3xl: 32px;
  --mkt-radius-pill: 999px;

  /* ── Elevation: floating cards, no borders ────────────────────── */
  --mkt-shadow-xs: 0 1px 2px rgb(26 19 32 / 0.06);
  --mkt-shadow-sm: 0 1px 2px rgb(26 19 32 / 0.06), 0 4px 12px -6px rgb(58 18 78 / 0.18);
  --mkt-shadow-md: 0 1px 2px rgb(26 19 32 / 0.06), 0 10px 24px -10px rgb(58 18 78 / 0.25);
  --mkt-shadow-lg: 0 1px 2px rgb(26 19 32 / 0.06), 0 18px 44px -14px rgb(58 18 78 / 0.25);
  --mkt-shadow-xl: 0 1px 2px rgb(26 19 32 / 0.06), 0 24px 60px -18px rgb(58 18 78 / 0.28);
  --mkt-shadow-hero: 0 1px 2px rgb(26 19 32 / 0.08), 0 32px 80px -16px rgb(58 18 78 / 0.35);

  /* ── Motion and layers ────────────────────────────────────────── */
  --mkt-duration-fast: 0.15s;
  --mkt-duration-instant: 0.01ms;   /* reduced motion: an animation that ends as it starts */
  --mkt-carousel-interval: 7s;      /* a hero slide's turn */
  --mkt-duration-slide: 0.45s;      /* a hero screen coming into focus, its neighbor stepping back */
  --mkt-layer-base: 0;              /* a section's decoration (the hero's dot) */
  --mkt-layer-raised: 1;            /* above a section's decoration */
  --mkt-layer-copy: 2;              /* the hero's words, above its picture */
  --mkt-layer-header: 5;            /* the header and its menu, above the page */
  --mkt-layer-skip: 50;             /* the skip link, above everything */
}