/* HHI Training - design tokens as CSS custom properties.
   Paste into GoHighLevel: Sites > (funnel or website) > Settings > Custom CSS, or a
   Custom Code element at the top of the page. Then paste hhi-components.css under it.
   Light is the default. Dark follows the visitor's OS setting, or force it with
   <html data-theme="dark"> (and data-theme="light" to opt out). */

:root, [data-theme="light"] {
  color-scheme: light;
  --bg: var(--paper-50);
  --surface: #ffffff;
  --surface-sunken: var(--paper-100);
  --surface-raised: #ffffff;
  --surface-tint: var(--terracotta-50);
  --surface-inverse: var(--ink-900);
  --band: var(--ink-900);
  --on-band: var(--paper-50);
  --on-band-muted: var(--ink-300);
  --text: var(--ink-900);
  --text-muted: var(--ink-600);
  --text-inverse: var(--paper-50);
  --text-brand: var(--terracotta-700);
  --link: var(--terracotta-700);
  --link-hover: var(--terracotta-800);
  --rule: var(--paper-300);
  --border-control: var(--grey-500);
  --border-strong: var(--ink-900);
  --brand: var(--terracotta-500);
  --primary: var(--terracotta-600);
  --primary-hover: var(--terracotta-700);
  --primary-active: var(--terracotta-800);
  --on-primary: #ffffff;
  --accent: var(--sage-700);
  --accent-subtle: var(--sage-100);
  --focus: var(--ink-900);
  --focus-inverse: var(--paper-50);
  --focus-on-band: var(--paper-50);
  --disabled-bg: var(--paper-200);
  --disabled-text: var(--grey-700);
  --success-text: var(--success-700);
  --success-bg: var(--success-50);
  --success-border: var(--success-600);
  --success-solid: var(--success-600);
  --on-success: #ffffff;
  --warning-text: var(--warning-800);
  --warning-bg: var(--warning-50);
  --warning-border: var(--warning-600);
  --warning-solid: var(--warning-400);
  --on-warning: var(--ink-900);
  --error-text: var(--error-700);
  --error-bg: var(--error-50);
  --error-border: var(--error-600);
  --error-solid: var(--error-600);
  --on-error: #ffffff;
  --info-text: var(--info-700);
  --info-bg: var(--info-50);
  --info-border: var(--info-600);
  --info-solid: var(--info-600);
  --on-info: #ffffff;
  --scrim: rgba(20, 35, 63, 0.6);
  --ink-50: #f3f7fe;
  --ink-100: #e5ebf6;
  --ink-200: #ced8e9;
  --ink-300: #aebbd2;
  --ink-400: #8999b5;
  --ink-500: #677897;
  --ink-600: #4c5e7e;
  --ink-700: #364868;
  --ink-800: #243554;
  --ink-900: #14233f;
  --terracotta-50: #fff4f1;
  --terracotta-100: #fee7df;
  --terracotta-200: #ffcebd;
  --terracotta-300: #fcaa8d;
  --terracotta-400: #e48765;
  --terracotta-500: #c4623e;
  --terracotta-600: #ac4c28;
  --terracotta-700: #923a16;
  --terracotta-800: #772a0a;
  --terracotta-900: #591c02;
  --paper-50: #fef9f3;
  --paper-100: #f7f2e9;
  --paper-200: #eee7dd;
  --paper-300: #dcd5ca;
  --paper-400: #c0b9af;
  --paper-500: #a19a91;
  --paper-600: #817b73;
  --paper-700: #656058;
  --paper-800: #49443e;
  --paper-900: #312d28;
  --grey-50: #f4f7fb;
  --grey-100: #ebeff3;
  --grey-200: #dce0e5;
  --grey-300: #c6cbd1;
  --grey-400: #a3a8af;
  --grey-500: #81878d;
  --grey-600: #676c73;
  --grey-700: #51565c;
  --grey-800: #3c4046;
  --grey-900: #25292f;
  --sage-50: #f2f9f4;
  --sage-100: #e4f0e9;
  --sage-200: #cde1d4;
  --sage-300: #adc9b7;
  --sage-400: #8cac98;
  --sage-500: #6d907b;
  --sage-600: #557662;
  --sage-700: #405f4d;
  --sage-800: #2e493a;
  --sage-900: #1e3327;
  --success-50: #eaf9f4;
  --success-100: #d7f3e9;
  --success-200: #b5e6d5;
  --success-300: #88cfb8;
  --success-400: #5cb198;
  --success-500: #2f9379;
  --success-600: #047860;
  --success-700: #01614d;
  --success-800: #024c3b;
  --success-900: #00372a;
  --warning-50: #fff5ea;
  --warning-100: #feebd4;
  --warning-200: #ffd8aa;
  --warning-300: #febc67;
  --warning-400: #f2a635;
  --warning-500: #d78c00;
  --warning-600: #a66c04;
  --warning-700: #845502;
  --warning-800: #674101;
  --warning-900: #4c2e00;
  --error-50: #fff1f1;
  --error-100: #fee4e4;
  --error-200: #fecaca;
  --error-300: #ff9fa2;
  --error-400: #f07179;
  --error-500: #d24b58;
  --error-600: #b22c3f;
  --error-700: #97162f;
  --error-800: #7a0521;
  --error-900: #5c0015;
  --info-50: #eef6fe;
  --info-100: #dcedfe;
  --info-200: #bbddff;
  --info-300: #92c3f3;
  --info-400: #6aa4da;
  --info-500: #4585bf;
  --info-600: #296aa2;
  --info-700: #175689;
  --info-800: #08426e;
  --info-900: #013053;
  --shadow-1: 0 1px 2px rgba(20, 35, 63, 0.06), 0 0 0 1px rgba(20, 35, 63, 0.04);
  --shadow-2: 0 6px 18px rgba(20, 35, 63, 0.08), 0 1px 3px rgba(20, 35, 63, 0.06);
  --shadow-3: 0 24px 56px rgba(20, 35, 63, 0.16), 0 4px 12px rgba(20, 35, 63, 0.08);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 96px;
  --space-12: 128px;
  --slide-safe: 96px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --border-w-hairline: 1px;
  --border-w-control: 1.5px;
  --border-w-strong: 2px;
  --focus-w: 3px;
  --focus-offset: 2px;
  --tap-min: 44px;
  --tap-portal: 56px;
  --control-h: 48px;
  --control-h-portal: 56px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --measure: 66ch;
  --grid-cols-desktop: 12;
  --grid-cols-tablet: 8;
  --grid-cols-mobile: 4;
  --gutter-desktop: 24px;
  --gutter-mobile: 16px;
  --margin-desktop: 64px;
  --margin-mobile: 16px;
  --container-max: 1200px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --duration-slow: 280ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1829;
  --surface: var(--ink-900);
  --surface-sunken: #0a1220;
  --surface-raised: var(--ink-800);
  --surface-tint: #2a1d1d;
  --surface-inverse: var(--paper-100);
  --band: #070d18;
  --on-band: var(--paper-100);
  --text: var(--paper-100);
  --text-muted: var(--ink-300);
  --text-inverse: var(--ink-900);
  --text-brand: var(--terracotta-300);
  --link: var(--terracotta-300);
  --link-hover: var(--terracotta-200);
  --rule: #2b3b58;
  --border-control: var(--ink-400);
  --border-strong: var(--paper-100);
  --brand: var(--terracotta-400);
  --primary: var(--terracotta-400);
  --primary-hover: var(--terracotta-300);
  --primary-active: var(--terracotta-200);
  --on-primary: var(--ink-900);
  --accent: var(--sage-300);
  --accent-subtle: #1b2f27;
  --focus: var(--paper-50);
  --focus-inverse: var(--ink-900);
  --disabled-bg: var(--ink-800);
  --disabled-text: var(--ink-300);
  --success-text: var(--success-300);
  --success-bg: #0f2c25;
  --success-border: var(--success-400);
  --success-solid: var(--success-400);
  --on-success: var(--ink-900);
  --warning-text: var(--warning-300);
  --warning-bg: #33230c;
  --warning-border: var(--warning-400);
  --error-text: var(--error-300);
  --error-bg: #3a131b;
  --error-border: var(--error-300);
  --error-solid: var(--error-400);
  --on-error: var(--ink-900);
  --info-text: var(--info-300);
  --info-bg: #0f2540;
  --info-border: var(--info-300);
  --info-solid: var(--info-400);
  --on-info: var(--ink-900);
  --scrim: rgba(4, 8, 16, 0.72);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1829;
    --surface: var(--ink-900);
    --surface-sunken: #0a1220;
    --surface-raised: var(--ink-800);
    --surface-tint: #2a1d1d;
    --surface-inverse: var(--paper-100);
    --band: #070d18;
    --on-band: var(--paper-100);
    --text: var(--paper-100);
    --text-muted: var(--ink-300);
    --text-inverse: var(--ink-900);
    --text-brand: var(--terracotta-300);
    --link: var(--terracotta-300);
    --link-hover: var(--terracotta-200);
    --rule: #2b3b58;
    --border-control: var(--ink-400);
    --border-strong: var(--paper-100);
    --brand: var(--terracotta-400);
    --primary: var(--terracotta-400);
    --primary-hover: var(--terracotta-300);
    --primary-active: var(--terracotta-200);
    --on-primary: var(--ink-900);
    --accent: var(--sage-300);
    --accent-subtle: #1b2f27;
    --focus: var(--paper-50);
    --focus-inverse: var(--ink-900);
    --disabled-bg: var(--ink-800);
    --disabled-text: var(--ink-300);
    --success-text: var(--success-300);
    --success-bg: #0f2c25;
    --success-border: var(--success-400);
    --success-solid: var(--success-400);
    --on-success: var(--ink-900);
    --warning-text: var(--warning-300);
    --warning-bg: #33230c;
    --warning-border: var(--warning-400);
    --error-text: var(--error-300);
    --error-bg: #3a131b;
    --error-border: var(--error-300);
    --error-solid: var(--error-400);
    --on-error: var(--ink-900);
    --info-text: var(--info-300);
    --info-bg: #0f2540;
    --info-border: var(--info-300);
    --info-solid: var(--info-400);
    --on-info: var(--ink-900);
    --scrim: rgba(4, 8, 16, 0.72);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.6);
  }
}