/* Copy of Bubble-invest/bubble-brand, tokens/build/css/tokens.css, version 0.3.12. Update it from there, never by hand. */
/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --base: #fdfcf9; /** Page background: warm white with a whisper of cream. Every page, slide, plaquette page and email body sits on it. */
  --card: #ffffff; /** Cards, tiers, form cards and inputs on top of `base` or `warm`. */
  --warm: #f7f4ee; /** Alternate section background. Sections alternate `base` / `warm`. */
  --ink: #221d16; /** Primary text on base, warm, card (16.3:1 on base, 15.2:1 on warm, 16.7:1 on card). Primary-button fill and footer surface, with `white` text on it. */
  --muted: #5b5b62; /** Secondary text (card bodies, intros, nav links) and field hints, on base, warm, card (6.6:1 on base, 6.1:1 on warm, 6.7:1 on card). */
  --faint: #8b8b92; /** Disabled text, field borders (3.4:1 on card) and decorative marks at 24px+. 3.3:1 on base: never for text people must read; field hints use `muted` (D34). */
  --violet: #667eea; /** The brand accent: focus ring, ticks, icon squares (with `white` icons, 3.7:1, D31), the border of a chosen option, accent words in titles (24px+). Never small text (3.6:1 on base): small violet text uses `violet-ink` (D34). */
  --violet-ink: #4f63c9; /** Violet for small text (eyebrows, accent pills, inline links, counter units) on base (5.2:1), warm (4.8:1) and accent pills (4.9:1). */
  --violet-soft: rgba(102, 126, 234, 0.08); /** Tinted fill: the selected segmented option, quote blocks, the open FAQ arrow. Accent pills mix it into `card`, opaque, so their text keeps 4.9:1 on that fill, in every section (D34). */
  --violet-line: rgba(102, 126, 234, 0.22); /** Violet-tinted border: accent pills and the card hover border. */
  --violet-night: #adbbf2; /** Violet for eyebrows, links and accent words on the night band (8.2:1 on night). `violet` itself is only 4.2:1 there. */
  --night: #1a2440; /** Brand night blue: the live top strip and at most one dark band per page or deck; the cockpit's sidebar in dark mode (D60). `white` text on it (15.3:1). The band can carry bubbles (3D on the website, drawn film bubbles elsewhere) and one glass panel (D26, D29, D37). */
  --white: #ffffff; /** Text and icons on ink, night, gain and loss fills. On `violet` icon squares, icons only, never text (3.7:1, D31, D34). The logo on dark backgrounds (D14). */
  --black: #000000; /** The logo on light backgrounds (D14), and Bulle, drawn from it (D61). Never for text: text uses `ink`. */
  --hair: rgba(14, 14, 16, 0.1); /** Standard 1px dividers, card and pill borders, ghost-button border. Never the edge of a field: fields use `faint` (D34). */
  --hair-soft: rgba(14, 14, 16, 0.06); /** Very subtle dividers: header bottom border, FAQ rows, mobile menu rows. */
  --gain: #1f7a4d; /** Gains and positive figures, always with their sign (+3,8 %) or a word (D23); a client's time saving such as « 3 h → 10 min » counts as a gain (D59). Only for gains, never for badges (D54). 5.2:1 on base, 4.8:1 on warm. */
  --loss: #b3261e; /** Losses, always with their sign (−1,2 %) (D23); form errors and destructive notices, always with a message. 6.4:1 on base. */
  --chart-1: #667eea; /** Chart colour 1, violet (D24). Categorical colours are used in this order, never cycled; a fifth series folds into « Autres ». */
  --chart-2: #3b5495; /** Chart colour 2, navy (D24). 7.1:1 on base. */
  --chart-3: #dd9b59; /** Chart colour 3, apricot (D24). 2.3:1 on base, 2.4:1 on white: every chart carries visible labels or a table. */
  --chart-4: #3cb3aa; /** Chart colour 4, teal (D24), kept towards blue to stay apart from `gain`. 2.5:1 on base, 2.6:1 on white: labels or a table. */
  --chart-grey: #78787d; /** « Autres », benchmarks and comparison lines in charts (D24). */
  --peach: #ffd9b0; /** Bubble colour 1, peach. Bubble film only (D26, D27): drawn bubbles, small bubbles (list bullets, live indicators), the hero bubble's glow, Bulle's pop, the 1px edge of glass panels (D29). Never text, buttons, backgrounds, eyebrows or the logo. */
  --pink: #ffc2cf; /** Bubble colour 2, pink. Bubble film only (D26, D27): drawn bubbles, small bubbles (list bullets, live indicators), the hero bubble's glow, Bulle's pop, the 1px edge of glass panels (D29). Never text, buttons, backgrounds, eyebrows or the logo. */
  --film-violet: #8f9cf2; /** Bubble colour 3, violet. Bubble film only (D26, D27): drawn bubbles, small bubbles (list bullets, live indicators), the hero bubble's glow, Bulle's pop, the 1px edge of glass panels (D29). Never text, buttons, backgrounds, eyebrows or the logo. Also the glow of a live bubble, and the light along Bulle's ring and the glow of its dot when it thinks (D28). */
  --mint: #a7e8d7; /** Bubble colour 4, mint. Bubble film only (D26, D27): drawn bubbles, small bubbles (list bullets, live indicators), the hero bubble's glow, Bulle's pop, the 1px edge of glass panels (D29). Never text, buttons, backgrounds, eyebrows or the logo. */
  --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; /** Titles, tables, figures, buttons, navigation, labels and eyebrows (D18). Figures are tabular by default, so tables and counters line up. No check mark ✓: use an icon. */
  --serif: Spectral, Georgia, serif; /** Running text: leads, paragraphs, card text, quotes (D18). Set 10% larger than a sans would be (small x-height). Never in tables, buttons or labels. */
  --sans-email: 'Hanken Grotesk', Helvetica, Arial, sans-serif; /** Email stack for titles and labels: Gmail ignores web fonts, so readers there see Helvetica or Arial. */
  --serif-email: Spectral, Georgia, 'Times New Roman', serif; /** Email stack for running text: readers whose mail app ignores web fonts see Georgia. */
  --gap-pill: 0.55rem; /** Gap between pills in a row. */
  --gap-grid: 1.1rem; /** Gap between cards and pricing tiers. */
  --pad-card: 1.6rem; /** Card padding. */
  --pad-tier: 1.9rem; /** Pricing-tier vertical padding (horizontal 1.6rem). */
  --gap-sechead: 2.6rem; /** Space under a section heading before its content. */
  --page-pad-min: 1.15rem; /** Mobile side gutter (lower bound of the fluid page padding clamp(1.15rem, 5vw, 2rem)). */
  --page-pad-max: 2rem; /** Desktop side gutter (upper bound). */
  --section-y-min: 3.6rem; /** Section vertical padding on mobile (fluid clamp(3.6rem, 9vw, 6.5rem)). */
  --section-y-max: 6.5rem; /** Section vertical padding on desktop. */
  --r-focus: 6px; /** Focus-ring outline corner. */
  --r-icon: 10px; /** 36px icon squares (FAQ categories), solid violet (D31). */
  --r-control: 12px; /** Icon squares, inputs, segmented options. */
  --r: 20px; /** Standard card radius; quote block. */
  --r-lg: 30px; /** Pricing tiers, form cards, large panels, image frames. */
  --r-chip: 40px; /** Pills, language switch, badges. */
  --r-button: 44px; /** All buttons (pill shape). */
  --maxw: 1180px; /** Max content width of every page container. */
  --prose-max: 640px; /** Max width of a section heading block. */
  --header-h: 58px; /** Sticky header height. */
  --marker-size: 40px; /** Icon square on cards: solid `violet` with a `white` icon (D31). */
  --email-width: 620px; /** Content width of HTML emails and the newsletter (images capped to it). */
  --shadow-card-hover: 0px 18px 40px -24px rgba(14, 14, 16, 0.28); /** Card on hover, with a 3px lift. No shadow at rest. */
  --shadow-tier-hover: 0px 24px 50px -28px rgba(14, 14, 16, 0.3); /** Pricing tier on hover, with a 4px lift. */
  --shadow-tier-featured: 0px 24px 60px -30px rgba(102, 126, 234, 0.5); /** The featured tier's violet glow. */
  --shadow-btn: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), 0px 8px 22px -10px rgba(14, 14, 16, 0.55); /** Primary button at rest. */
  --shadow-btn-hover: 0px 14px 30px -12px rgba(14, 14, 16, 0.6); /** Primary button on hover, with a 2px lift. */
  --shadow-form: 0px 4px 40px -16px rgba(14, 14, 16, 0.1); /** Form cards (newsletter signup). */
  --ease: cubic-bezier(0.16, 1, 0.3, 1); /** Controls, reveals and every transition (D46). */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /** Hops, drops and pops: the logo's dot landing, Bulle's hop, a chart's end point (D46). */

  /* Type styles: font: var(--type-<name>); letter-spacing: var(--type-<name>-tracking); */
  --type-hero: 700 clamp(2rem, 7.4vw, 4.15rem)/1.06 var(--sans);
  --type-hero-tracking: -0.03em;
  --type-section-title: 700 clamp(1.65rem, 4.6vw, 2.6rem)/1.1 var(--sans);
  --type-section-title-tracking: -0.025em;
  --type-price: 700 2.15rem/1 var(--sans);
  --type-price-tracking: -0.02em;
  --type-card-title: 700 1.1rem/1.3 var(--sans);
  --type-card-title-tracking: -0.01em;
  --type-lead: 400 1.2rem/1.55 var(--serif);
  --type-lead-tracking: 0;
  --type-body: 400 1.1rem/1.62 var(--serif);
  --type-body-tracking: 0;
  --type-card-body: 400 1rem/1.55 var(--serif);
  --type-card-body-tracking: 0;
  --type-quote: italic 400 1.3rem/1.45 var(--serif);
  --type-quote-tracking: 0;
  --type-button: 600 0.9rem/1.2 var(--sans);
  --type-button-tracking: 0;
  --type-nav: 500 0.86rem/1.4 var(--sans);
  --type-nav-tracking: 0;
  --type-eyebrow: 600 0.75rem/1.4 var(--sans);
  --type-eyebrow-tracking: 0.1em;
  --type-label: 600 0.69rem/1.4 var(--sans);
  --type-label-tracking: 0.1em;
  --type-chip: 500 0.78rem/1.3 var(--sans);
  --type-chip-tracking: 0;
  --type-figure: 700 clamp(1.35rem, 5.4vw, 1.9rem)/1 var(--sans);
  --type-figure-tracking: -0.02em;
  --type-table: 400 0.85rem/1.45 var(--sans);
  --type-table-tracking: 0;
  --type-caption: 400 0.78rem/1.45 var(--sans);
  --type-caption-tracking: 0;
}