/* Generated from design/tokens.css by `npm run design:sync`. Edit that file, never this one. */
/* BetterZap design tokens: the one source of colors, strokes, shadows, radii, type and spacing for the panel, the site,
   the admin and the phone's panel. The rules for using them are in docs/design-system.md.

   Edit only design/tokens.css, then run `npm run design:sync`, which copies it to public/tokens.css (the panel and the
   phone's panel) and website/public/css/tokens.css (the site and the admin). A test fails if the copies differ.

   Dark mode is a media query plus data-theme, not light-dark(), because the phone's panel targets Safari 15. Keep the
   two dark blocks identical: a test checks that too. */

:root {
  color-scheme: light dark;

  /* Brand. The same in both themes. */
  --black: #120f18;
  --white: #ffffff;
  --hot: #ff2e88;
  --mint: #c4f7ca;
  --mint-hover: #aef0b6;
  --on-mint: #120f18;
  --tape: #ffe14d;
  --lilac: #b9a6ff;
  --violet: #7c4dff;
  --sky: #5cd6ff;
  --go: #5fe07a;

  /* Night: the surfaces that stay dark in both themes, like the panel's sidebar and the site's header. */
  --night-raised: #1e1a27;
  --night-sunken: #1a1622;
  --night-hover: #2c2736;
  --night-line: #34303d;
  --night-text: #f7f3f9;
  --night-quiet: #b9b1c2;
  --night-soft: #d6d0dd;
  --night-faint: #e9e4ee;
  /* An error on a night surface, where --bad's light value would be too dark to read. */
  --night-bad: #f39aab;

  /* WhatsApp's own colors, only for drawings of WhatsApp: the demo chats, the phone mockups, the send button. */
  --wa-green: #25d366;
  --wa-teal: #075e54;
  --wa-teal-dark: #054a42;
  --wa-ink: #111b21;
  --wa-quiet: #54656f;
  --wa-wallpaper: #efeae2;
  --wa-bubble-out: #d9fdd3;
  --wa-bar: #f0f2f5;
  /* WhatsApp's pale yellow notice above a chat, and a fixed error red for text on its white. The site's chat only. */
  --wa-notice: #fdf4c5;
  --wa-error: #ae2941;
  /* A real WhatsApp conversation inside the panel, in Mensagens. These follow the theme, as WhatsApp's own do. */
  --wa-chat-wall: var(--wa-wallpaper);
  --wa-chat-in: var(--white);
  --wa-chat-out: var(--wa-bubble-out);
  --wa-chat-text: var(--wa-ink);
  --wa-chat-meta: var(--wa-quiet);
  --wa-chat-meta-out: var(--wa-quiet);
  --wa-chat-read: #0160c1;

  /* Theme: what every screen is built from. Light here, dark below. */
  --bg: #fffdfb;
  --surface: var(--white);
  --sunken: #f6f1f4;
  --ink: var(--black);
  --quiet: #4d4656;
  /* A hairline between rows and around quiet boxes. */
  --line: #e3dde6;
  /* The bold outline of cards, fields and buttons, and the color of the offset shadows. */
  --stroke: var(--ink);
  --primary: var(--black);
  --primary-hover: #000000;
  --on-primary: var(--white);
  /* Text links. Darker than --hot so it reads on white. */
  --link: #c20f5e;
  --link-hover: #9c0b4b;
  /* A highlight fill that a section may swap, as the site's header swaps mint for hot pink. */
  --accent: var(--mint);
  --on-accent: var(--on-mint);

  /* Six tints, for tags, avatars and funnel stages. Pick one with data-tint="0" to "5". */
  --tint-0-bg: #e4fde7;
  --tint-0-ink: #027653;
  --tint-1-bg: #f4effe;
  --tint-1-ink: #6f47b4;
  --tint-2-bg: #fdeee7;
  --tint-2-ink: #a24019;
  --tint-3-bg: #e2f5fe;
  --tint-3-ink: #0160c1;
  --tint-4-bg: #fcf6d9;
  --tint-4-ink: #7a5d00;
  --tint-5-bg: #fdecf4;
  --tint-5-ink: #a42c71;

  /* Status. Use these through data-tone="good" | "warn" | "bad". */
  --good-bg: var(--tint-0-bg);
  --good: var(--tint-0-ink);
  --warn-bg: var(--tint-4-bg);
  --warn: var(--tint-4-ink);
  --warn-line: #e8d98a;
  --bad-bg: #fdeaed;
  --bad: #ae2941;

  /* Strokes and shadows: hard edges, offset shadows with no blur. */
  --stroke-thin: 2px;
  --stroke-bold: 3px;
  --stroke-heavy: 4px;
  --border: var(--stroke-bold) solid var(--stroke);
  --shadow-xs: 2px 2px 0 var(--stroke);
  --shadow-sm: 4px 4px 0 var(--stroke);
  --shadow: 6px 6px 0 var(--stroke);
  --shadow-lg: 8px 8px 0 var(--stroke);
  --focus-ring: 3px solid var(--hot);
  /* Something floating over the page, such as a menu, a popover or a dialog. The one soft shadow, and only in the panel. */
  --shadow-float: 0 8px 24px color-mix(in srgb, var(--black) 16%, transparent), 0 1px 3px color-mix(in srgb, var(--black) 10%, transparent);

  /* Corners. */
  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* The smallest text the panel draws. */
  --text-min: 14px;

  /* Type. Figtree, heavy: headings 800 to 900, buttons 700 to 900, body 400 to 600. */
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing, on a 4px grid. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  /* Section gaps, for the vertical space between a page's sections. --section-gap is a section's own padding above and
     below; --section-gap-tight is the space after a hero or another poster block, which already ends in a hard edge. */
  --section-gap: clamp(56px, 8vw, 120px);
  --section-gap-tight: clamp(40px, 5vw, 64px);

  /* States: how faded a control is when it can't be used. One value everywhere. */
  --disabled-opacity: 0.55;

  /* Motion: a press moves a button into its shadow. */
  --press: 120ms ease;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--black);
    --surface: var(--night-raised);
    --sunken: var(--night-sunken);
    --ink: var(--night-text);
    --quiet: var(--night-quiet);
    --line: var(--night-line);
    --primary: #ff6aab;
    --primary-hover: #ff8cbd;
    --on-primary: var(--black);
    --link: #ff6aab;
    --link-hover: #ff8cbd;

    --tint-0-bg: #16302a;
    --tint-0-ink: #80e0b4;
    --tint-1-bg: #272040;
    --tint-1-ink: #c5aff2;
    --tint-2-bg: #38231a;
    --tint-2-ink: #f2a57f;
    --tint-3-bg: #152c40;
    --tint-3-ink: #8cc8fa;
    --tint-4-bg: #332b12;
    --tint-4-ink: #edd17b;
    --tint-5-bg: #3a1d2e;
    --tint-5-ink: #f0a0cc;

    --warn-line: #5c5026;
    --bad-bg: #3b1d23;
    --bad: #f39aab;

    --wa-chat-wall: #0b141a;
    --wa-chat-in: #202c33;
    --wa-chat-out: #005c4b;
    --wa-chat-text: #e9edef;
    --wa-chat-meta: #8696a0;
    --wa-chat-meta-out: #c5ddd7;
    --wa-chat-read: var(--sky);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--black);
  --surface: var(--night-raised);
  --sunken: var(--night-sunken);
  --ink: var(--night-text);
  --quiet: var(--night-quiet);
  --line: var(--night-line);
  --primary: #ff6aab;
  --primary-hover: #ff8cbd;
  --on-primary: var(--black);
  --link: #ff6aab;
  --link-hover: #ff8cbd;

  --tint-0-bg: #16302a;
  --tint-0-ink: #80e0b4;
  --tint-1-bg: #272040;
  --tint-1-ink: #c5aff2;
  --tint-2-bg: #38231a;
  --tint-2-ink: #f2a57f;
  --tint-3-bg: #152c40;
  --tint-3-ink: #8cc8fa;
  --tint-4-bg: #332b12;
  --tint-4-ink: #edd17b;
  --tint-5-bg: #3a1d2e;
  --tint-5-ink: #f0a0cc;

  --warn-line: #5c5026;
  --bad-bg: #3b1d23;
  --bad: #f39aab;

  --wa-chat-wall: #0b141a;
  --wa-chat-in: #202c33;
  --wa-chat-out: #005c4b;
  --wa-chat-text: #e9edef;
  --wa-chat-meta: #8696a0;
  --wa-chat-meta-out: #c5ddd7;
  --wa-chat-read: var(--sky);
}

:root[data-theme="light"] {
  color-scheme: light;
}

[data-tint="0"] { --tint-bg: var(--tint-0-bg); --tint-ink: var(--tint-0-ink); }
[data-tint="1"] { --tint-bg: var(--tint-1-bg); --tint-ink: var(--tint-1-ink); }
[data-tint="2"] { --tint-bg: var(--tint-2-bg); --tint-ink: var(--tint-2-ink); }
[data-tint="3"] { --tint-bg: var(--tint-3-bg); --tint-ink: var(--tint-3-ink); }
[data-tint="4"] { --tint-bg: var(--tint-4-bg); --tint-ink: var(--tint-4-ink); }
[data-tint="5"] { --tint-bg: var(--tint-5-bg); --tint-ink: var(--tint-5-ink); }