/*
 * Sonify brand tokens for the backer checkout, taken from https://trysonify.com on 2026-10-05
 * (stylesheet /assets/index-D1XODMuN.css, Tailwind + shadcn HSL tokens; bundle /assets/index-CZbk1vgs.js).
 * The site has one theme only (light: no .dark rules, no prefers-color-scheme), so these are the light values.
 *
 *   --brand-bg              --background 48 23% 97%: page background (warm ivory).
 *   --brand-surface         --card 0 0% 100%: FAQ, research and demo cards.
 *   --brand-surface-2       --secondary 60 14% 93%: alternating section bands, spec chips, hover fills.
 *   --brand-text            --foreground 0 0% 6%: text and headings. Also the colour of the dark bands (hero, CTA strips).
 *   --brand-muted           --muted-foreground 60 2% 40%: nav links, captions, secondary copy.
 *   --brand-primary         --primary 16 53% 58%: terracotta buttons, accent headings, icons (the same colour is hard-coded as #CC785C).
 *   --brand-primary-hover   the button hover, bg-primary/90 (primary at 90% opacity), flattened over --brand-bg.
 *   --brand-primary-text    --primary-foreground 0 0% 100%: white button text.
 *   --brand-accent          what the site uses for links, focus rings (--ring) and highlighted words: the terracotta above.
 *                           (The shadcn --accent token is 27 51% 66% = #d5a47c "kraft". The site uses it only as a hover fill.
 *                           It is too light for text: about 2.1:1 on the background.)
 *   --brand-border          --border / --input 60 5% 82%: borders and input outlines.
 *   --brand-danger          --destructive 9 61% 49%.
 *   --brand-success         #7ba68a sage green, hard-coded on the landing page for positive states ("Actively masking", "Masked").
 *                           The site has no success token.
 *   --brand-radius          rounded-xl (0.75rem): cards. Large feature panels use 16-20px.
 *   --brand-radius-sm       rounded-md (--radius 0.5rem - 2px): buttons and inputs.
 *   --brand-font-*          Google Fonts DM Sans (UI and body; 400/500/600/700) and DM Serif Display (h1-h4, weight 400 only).
 *                           Self-hosted latin subset below.
 *   --brand-shadow          none: cards are flat at rest, with a 1px border and no shadow. On hover the site uses
 *                           Tailwind shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1).
 */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000; /* variable font (wght axis); the site uses 400, 500, 600, 700 */
  font-display: swap;
  src: url("/static/fonts/dm-sans-latin-var.woff2") format("woff2");
  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: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/dm-serif-display-latin-400.woff2") format("woff2");
  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;
}

:root {
  --brand-bg: #f9f8f6;
  --brand-surface: #ffffff;
  --brand-surface-2: #f0f0eb;
  --brand-text: #0f0f0f;
  --brand-muted: #686864;
  --brand-primary: #cd795b;
  --brand-primary-hover: #d1866a;
  --brand-primary-text: #ffffff;
  --brand-accent: #cd795b;
  --brand-border: #d3d3cf;
  --brand-danger: #c94831;
  --brand-success: #7ba68a;
  --brand-radius: 12px;
  --brand-radius-sm: 6px;
  --brand-font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --brand-font-heading: "DM Serif Display", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --brand-shadow: none;
}

/*
 * Accessibility adjustments for the checkout (added after extraction).
 * The site's terracotta #cd795b with white text is about 3.2:1, and terracotta text on ivory about 3.0:1,
 * both under the 4.5:1 minimum for normal text. Payment pages need readable buttons and links, so:
 *   - buttons use a deeper terracotta (#b05c3c, 4.7:1 with white text),
 *   - links and focus rings use #a85537 (4.9:1 on ivory),
 *   - the original #cd795b stays for decoration (badges, step dots, bars, eyebrow rules),
 *   - green text uses a deeper sage (#3f6b50); the site's #7ba68a stays for dots and tints.
 */
:root {
  --brand-terracotta: #cd795b;
  --brand-kraft: #d5a47c;
  --brand-sage: #7ba68a;
  --brand-primary: #b05c3c;
  --brand-primary-hover: #9a4c30;
  --brand-accent: #a85537;
  --brand-success: #3f6b50;
}