/*
  Discover Digital design tokens, copied from the approved Hybrid design
  (design-concepts/homepage/hybrid.html). Change a value there and here together.
  Modules use these custom properties only; no hard-coded colours, fonts or radii.
  Brand pattern images (--pat, --feat-*) arrive with the modules that use them.
*/
:root {
  --orange: #FA6122;
  --orange-hi: #FF7A3F;
  --indigo: #1A4362;
  --deep: #0E2436;
  --deep-2: #10293D;
  --deep-3: #0A1B29;
  --paper: #F3F6F9;
  --wa: #25D366;
  /* Partner brand colours, for their glyphs only (the platform icons show them on hover) */
  --brand-hubspot: #FF5C35;
  --brand-meta: #0081FB;
  --brand-gads: #4285F4;
  --on-orange: #10293D;

  --page: #F3F6F9;
  --band: #E8EEF3;
  --surface: #FBFCFD;
  --surface-2: #E1E9F0;
  --ink: #10293D;
  --ink-2: #2B4760;
  --muted: #4D6377;
  --line: rgba(16, 41, 61, 0.12);
  --line-strong: rgba(16, 41, 61, 0.26);
  --accent-ink: #B93D0B;
  --focus: #10293D;
  --shadow: 0 1px 2px rgba(16, 41, 61, 0.06), 0 26px 52px -30px rgba(16, 41, 61, 0.34);
  --nav-page: rgba(243, 246, 249, 0.88);
  --field-bg: #FBFCFD;
  --field-border: #7C8D9C;
  --error: #B42318;
  --chip-bg: rgba(251, 252, 253, 0.92);
  --bubble-user: #10293D;
  --bubble-user-ink: #F3F6F9;
  --foot-bg: #0E2436;
  --show-light: block;
  --show-dark: none;
  --dg-line: #1A4362;
  --dg-box: #FBFCFD;
  --dg-band: rgba(26, 67, 98, 0.05);
  --dg-text: #10293D;
  --dg-mid: #4D6377;
  --dg-stroke: rgba(16, 41, 61, 0.5);

  --font-display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ds: 1;
  --gutter: max(clamp(16px, 3.4vw, 48px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --maxw: 1440px;
  --r: 24px;
  --r-in: 16px;
  --nav-h: calc(72px + env(safe-area-inset-top, 0px));
  --indent: 0px;
  --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}
/* Greek: Bricolage Grotesque and Figtree have no Greek glyphs */
:root:lang(el) {
  --font-display: "Commissioner", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ds: 0.86;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0E2436;
    --band: #10293D;
    --surface: #132F46;
    --surface-2: #183A55;
    --ink: #F3F6F9;
    --ink-2: #CAD7E2;
    --muted: #A3B6C7;
    --line: rgba(243, 246, 249, 0.12);
    --line-strong: rgba(243, 246, 249, 0.26);
    --accent-ink: #FF8350;
    --focus: #FA6122;
    --shadow: 0 1px 2px rgba(3, 10, 16, 0.3), 0 26px 52px -30px rgba(3, 10, 16, 0.85);
    --nav-page: rgba(14, 36, 54, 0.88);
    --field-bg: #0E2436;
    --field-border: #6E8AA2;
    --error: #FF9B8F;
    --chip-bg: rgba(19, 47, 70, 0.92);
    --bubble-user: #F3F6F9;
    --bubble-user-ink: #10293D;
    --foot-bg: #0A1B29;
    --show-light: none;
    --show-dark: block;
    --dg-line: #FA6122;
    --dg-box: #132F46;
    --dg-band: rgba(243, 246, 249, 0.035);
    --dg-text: #F3F6F9;
    --dg-mid: #A3B6C7;
    --dg-stroke: rgba(243, 246, 249, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #0E2436;
  --band: #10293D;
  --surface: #132F46;
  --surface-2: #183A55;
  --ink: #F3F6F9;
  --ink-2: #CAD7E2;
  --muted: #A3B6C7;
  --line: rgba(243, 246, 249, 0.12);
  --line-strong: rgba(243, 246, 249, 0.26);
  --accent-ink: #FF8350;
  --focus: #FA6122;
  --shadow: 0 1px 2px rgba(3, 10, 16, 0.3), 0 26px 52px -30px rgba(3, 10, 16, 0.85);
  --nav-page: rgba(14, 36, 54, 0.88);
  --field-bg: #0E2436;
  --field-border: #6E8AA2;
  --error: #FF9B8F;
  --chip-bg: rgba(19, 47, 70, 0.92);
  --bubble-user: #F3F6F9;
  --bubble-user-ink: #10293D;
  --foot-bg: #0A1B29;
  --show-light: none;
  --show-dark: block;
  --dg-line: #FA6122;
  --dg-box: #132F46;
  --dg-band: rgba(243, 246, 249, 0.035);
  --dg-text: #F3F6F9;
  --dg-mid: #A3B6C7;
  --dg-stroke: rgba(243, 246, 249, 0.45);
  color-scheme: dark;
}
@media (min-width: 1024px) { :root { --indent: 7.5rem; } }
@media (max-width: 899px) { :root { --nav-h: calc(64px + env(safe-area-inset-top, 0px)); } }