/* Flowella 2026 design tokens, from DESIGN.md ("Flo's Bright Chapters").
   Light values first; dark values in two mirrored blocks: the system preference (unless the visitor
   chose light) and an explicit data-theme="dark" choice. Keep the two dark blocks identical. */
:root {
  --ground: #F6F9FC;
  --surface: #FFFFFF;
  --surface-2: #EDF3F9;
  --ink: #0B1E33;
  --ink-soft: #3A4E63;
  --line: #D8E2EC;
  --line-strong: #A9BDD0;
  --field-sky: #C9EEFB;
  --field-mint: #BFF3EA;
  --field-green: #C8F4D8;
  --field-coral: #FFD5CE;
  --field-blue: #C4CEF8;
  --sky: #4FB6EC;
  --mint: #30D5C8;
  --green: #25D366;
  --coral: #FF6F61;
  --blue: #0E6EA6;
  --on-bright: #0B1E33;
  --on-blue: #FFFFFF;
  --tile-dark: #0B2236;
  --accent-ink: #0A5A8A;
  --tile-light: #EAF2EF;
  --tile-light-line: #CFDDD8;
  --speech-bg: #FFFFFF;
  --speech-ink: #0B1E33;
  --disc-bg: #EDF2F7;
  --disc-ring: #C3D3E2;
  --btn-bg: #0E6EA6;
  --btn-bg-hover: #0A5A8A;
  --btn-ink: #FFFFFF;
  --wa-bg: #25D366;
  --wa-bg-hover: #1FC45D;
  --wa-ink: #06301A;
  --wave: #A8DCF5;
  /* Section motif tints (DESIGN.md, The Section Signature Rule): each field's deeper tint, the step Wave Sky takes
     from Sky Field, filling the flat motif in a section hero and the panel behind Flo on phones. Stone Mint for
     Product, Hill Periwinkle for Solutions, Road Green for Get started and Pricing, Ring Coral for Integrations. */
  --stone: #93E5D8;
  --hill: #B1BDF3;
  --road: #A2E6BD;
  --chain: #FBBDB3;
  --chip-bg: #FFFFFF;
  --sticker-bg: #FFFFFF;
  --sticker-ink: #0B1E33;
  --logo-bg: #FFFFFF;
  --chat-bg: #F1ECE4;
  --bubble-in: #FFFFFF;
  --bubble-out: #D9FDD3;
  --sheet-bg: #FFFFFF;
  --band: #0B2236;
  --band-ink: #F1F7FB;
  --band-soft: #BACBDA;
  --close-field: #25D366;
  --close-ink: #0B1E33;
  --close-btn-bg: #0B1E33;
  --close-btn-ink: #FFFFFF;
  --close-wa-bg: #FFFFFF;
  --close-wa-ink: #0B1E33;
  --close-wa-glyph: #13994A;
  --star: #FF6F61;
  --focus: #0E6EA6;
  --sel-bg: #BFE6FA;
  --sel-ink: #0B1E33;
  --scroll-thumb: #A9BDD0;
  --qr-ink: #0B1E33;
  --qr-bg: #FFFFFF;
  --flash: #BDF2DA;
  --err: #B3261E;
  --ph: #5F7387;
  --field-line: #5F7387;  /* input edges and choice rings on real forms: 3:1 on Sheet and every field tint */
  --edge-shadow: rgb(11 30 51 / 0.3);  /* the soft edge of a sticky column over scrolled content */
  --wind: rgb(255 255 255 / 0.9);
  --flo-shade: rgb(168 62 48 / 0.5);
  --crm-bg: #FFE9E1;
  --crm-ink: #9A3412;
  --shadow-xs: 0 1px 2px rgb(11 30 51 / .12);
  --shadow-sm: 0 10px 20px -14px rgb(11 30 51 / .32);
  --shadow: 0 20px 40px -20px rgb(11 30 51 / .25);
  --shadow-lift: 0 30px 50px -24px rgb(11 30 51 / .34);
  --knob-x: 0px;
  --show-light: block;
  --show-dark: none;

  --display: "Unbounded", "Trebuchet MS", Verdana, system-ui, sans-serif;
  --text: "Figtree", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --inset: clamp(8px, 1.4vw, 20px);
  --sec: clamp(80px, 9vw, 144px);
  --header-h: 76px;
  --r-xl: 36px;
  --r-lg: 30px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #081420;
    --surface: #0E1D2C;
    --surface-2: #132739;
    --ink: #F1F7FB;
    --ink-soft: #B8C8D6;
    --line: #1D3245;
    --line-strong: #3A5873;
    --field-sky: #08303F;
    --field-mint: #07322F;
    --field-green: #082F1B;
    --field-coral: #3A1714;
    --field-blue: #1C2763;
    --sky: #4FB6EC;
    --mint: #30D5C8;
    --green: #25D366;
    --coral: #FF7A6E;
    --blue: #2A8BC6;
    --on-bright: #0B1E33;
    --on-blue: #FFFFFF;
    --tile-dark: #0B2236;
    --accent-ink: #7FCBF3;
    --speech-bg: #F1F7FB;
    --speech-ink: #0B1E33;
    --disc-bg: #F1F7FB;
    --disc-ring: #D3DFEA;
    --tile-light-line: #EAF2EF;
    --btn-bg: #4FB6EC;
    --btn-bg-hover: #7FCBF3;
    --btn-ink: #0B1E33;
    --wa-bg: #25D366;
    --wa-bg-hover: #4BDE84;
    --wa-ink: #06301A;
    --wave: #0D3C52;
    --stone: #05403C;
    --hill: #24317E;
    --road: #0A3E24;
    --chain: #4E211D;
    --chip-bg: #0E1D2C;
    --sticker-bg: #F1F7FB;
    --sticker-ink: #0B1E33;
    --logo-bg: #FFFFFF;
    --chat-bg: #0B141A;
    --bubble-in: #1F2C34;
    --bubble-out: #005C4B;
    --sheet-bg: #102233;
    --band: #0F2B45;
    --band-ink: #F1F7FB;
    --band-soft: #BACBDA;
    --close-field: #0C4A2A;
    --close-ink: #F1F7FB;
    --close-btn-bg: #4FB6EC;
    --close-btn-ink: #0B1E33;
    --close-wa-bg: #25D366;
    --close-wa-ink: #06301A;
    --close-wa-glyph: #06301A;
    --star: #FF7A6E;
    --focus: #7FCBF3;
    --sel-bg: #1E5A80;
    --sel-ink: #FFFFFF;
    --scroll-thumb: #2C4A63;
    --qr-ink: #0B1E33;
    --qr-bg: #FFFFFF;
    --flash: #155C3A;
    --err: #FF9A8F;
    --ph: #8DA2B5;
    --field-line: #6A86A0;
    --edge-shadow: rgb(0 0 0 / 0.6);
    --wind: rgb(127 203 243 / 0.5);
    --flo-shade: rgb(10 2 2 / 0.78);
    --crm-bg: #3B2018;
    --crm-ink: #FFB59E;
    --shadow-xs: 0 1px 2px rgb(0 0 0 / .45);
    --shadow-sm: 0 10px 20px -14px rgb(0 0 0 / .7);
    --shadow: 0 20px 40px -20px rgb(0 0 0 / .65);
    --shadow-lift: 0 30px 50px -24px rgb(0 0 0 / .75);
    --knob-x: 32px;
    --show-light: none;
    --show-dark: block;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #081420;
  --surface: #0E1D2C;
  --surface-2: #132739;
  --ink: #F1F7FB;
  --ink-soft: #B8C8D6;
  --line: #1D3245;
  --line-strong: #3A5873;
  --field-sky: #08303F;
  --field-mint: #07322F;
  --field-green: #082F1B;
  --field-coral: #3A1714;
  --field-blue: #1C2763;
  --sky: #4FB6EC;
  --mint: #30D5C8;
  --green: #25D366;
  --coral: #FF7A6E;
  --blue: #2A8BC6;
  --on-bright: #0B1E33;
  --on-blue: #FFFFFF;
  --tile-dark: #0B2236;
  --accent-ink: #7FCBF3;
  --speech-bg: #F1F7FB;
  --speech-ink: #0B1E33;
  --disc-bg: #F1F7FB;
  --disc-ring: #D3DFEA;
  --tile-light-line: #EAF2EF;
  --btn-bg: #4FB6EC;
  --btn-bg-hover: #7FCBF3;
  --btn-ink: #0B1E33;
  --wa-bg: #25D366;
  --wa-bg-hover: #4BDE84;
  --wa-ink: #06301A;
  --wave: #0D3C52;
  --stone: #05403C;
  --hill: #24317E;
  --road: #0A3E24;
  --chain: #4E211D;
  --chip-bg: #0E1D2C;
  --sticker-bg: #F1F7FB;
  --sticker-ink: #0B1E33;
  --logo-bg: #FFFFFF;
  --chat-bg: #0B141A;
  --bubble-in: #1F2C34;
  --bubble-out: #005C4B;
  --sheet-bg: #102233;
  --band: #0F2B45;
  --band-ink: #F1F7FB;
  --band-soft: #BACBDA;
  --close-field: #0C4A2A;
  --close-ink: #F1F7FB;
  --close-btn-bg: #4FB6EC;
  --close-btn-ink: #0B1E33;
  --close-wa-bg: #25D366;
  --close-wa-ink: #06301A;
  --close-wa-glyph: #06301A;
  --star: #FF7A6E;
  --focus: #7FCBF3;
  --sel-bg: #1E5A80;
  --sel-ink: #FFFFFF;
  --scroll-thumb: #2C4A63;
  --qr-ink: #0B1E33;
  --qr-bg: #FFFFFF;
  --flash: #155C3A;
  --err: #FF9A8F;
  --ph: #8DA2B5;
  --field-line: #6A86A0;
  --edge-shadow: rgb(0 0 0 / 0.6);
  --wind: rgb(127 203 243 / 0.5);
  --flo-shade: rgb(10 2 2 / 0.78);
  --crm-bg: #3B2018;
  --crm-ink: #FFB59E;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / .45);
  --shadow-sm: 0 10px 20px -14px rgb(0 0 0 / .7);
  --shadow: 0 20px 40px -20px rgb(0 0 0 / .65);
  --shadow-lift: 0 30px 50px -24px rgb(0 0 0 / .75);
  --knob-x: 32px;
  --show-light: none;
  --show-dark: block;
}

/* Greek and Arabic: Unbounded and Figtree have no Greek or Arabic glyphs, so these pages switch the
   whole stack (Latin brand words included) to faces that match the system's character. */
:root:lang(el) {
  --display: "Geologica", "Trebuchet MS", Verdana, system-ui, sans-serif;
  --text: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
:root:lang(ar) {
  --display: "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
  --text: "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
}