/* THE ONE PLACE for colors and fonts. Brand look from holisticbrain.co,
   applied 2026-09-23. Contrast (WCAG) noted beside each text pairing. */
:root {
  /* Brand palette */
  --navy: #08336D;          /* text, header, main buttons */
  --navy-deep: #06223F;     /* text on turquoise: 5.9:1 (navy itself is 4.497:1 there, just under AA) */
  --logo-turquoise: #1EACBA;/* THE accent (2026-10-14, replaces cyan #1DC1E4): highlights ONLY — never text on white (2.7:1) */
  --light-turquoise: #4CC6CF;
  --earth-dark: #413A31;    /* warm/botanical side: Studies + blend pages */
  --earth-rust: #8C5336;
  --earth-bark: #907358;    /* borders/decoration only — 3.4:1 on sand, too low for body text */
  --earth-tan: #B29677;     /* borders/decoration only — 2.2:1 on sand, fails as text */
  --earth-sand: #E6E2D8;
  --grey-light: #F6F6F6;
  --grey-warm: #F0EFEE;
  /* Logo colors: the no-cover placeholder gradient (2026-10-13) and the Lesson Circle segments (2026-10-14). */
  --logo-magenta: #C12776;  /* 5.5:1 on white */
  --logo-teal: #1B99AE;     /* 3.4:1 on white — large text / accents only */
  --logo-purple: #842C73;   /* brand purple sampled from HB_LOGO_App (founder 2026-10-23); 8.1:1 on white */

  /* Roles (the rest of the CSS uses only these) */
  --color-bg: var(--grey-light);
  --color-surface: var(--grey-warm);
  --color-text: var(--navy);              /* 11.4:1 on bg, 10.7:1 on surface */
  --color-muted: #4E5D73;                 /* navy-grey tint; 6.2:1 on bg, 5.8:1 on surface */
  --color-border: #DDDBD7;                /* neutral hairline between the two greys */
  --color-accent: var(--logo-turquoise);
  --color-header-bg: var(--navy);
  --color-header-text: #FFFFFF;           /* 12.3:1 on navy */
  --color-button-bg: var(--navy);
  --color-button-text: #FFFFFF;           /* 12.3:1 */
  --color-link: var(--navy);
  --color-banner-bg: var(--logo-turquoise);
  --color-banner-text: var(--navy-deep);  /* 5.9:1 on turquoise */
  --color-notice-bg: var(--earth-sand);   /* navy on sand 9.5:1 */
  --color-notice-border: var(--earth-rust);
  --color-error: #A33A3A;                 /* 6.0:1 on bg */
  /* Suicide-Informed Training's calm crisis band + content note (2026-10-24): navy on white 12.3:1; the turquoise
     edge is decoration only. */
  --color-crisis-bg: #FFFFFF;
  --color-crisis-text: var(--navy);
  --color-crisis-edge: var(--logo-turquoise);

  /* Lesson player */
  --color-slide-bg: #FFFFFF;
  --color-slide-fit-bg: #FAF8F3;                 /* cream behind a "Fit: whole" picture (exact graphics) */
  --color-slide-overlay: rgba(8, 51, 109, 0.90); /* navy band under full-bleed text; white on it ≈ 11:1 */
  --color-slide-overlay-text: #FFFFFF;
  --color-answer-right: var(--logo-turquoise);   /* accent bar only, never text */
  --color-answer-chosen: var(--earth-rust);      /* accent bar only */
  --color-next: var(--logo-turquoise);           /* highlight bar on the next section */

  /* Home page: course cards + Continue learning (2026-10-13) */
  --color-cover-from: var(--logo-teal);          /* no-cover placeholder: logo gradient, teal → magenta, */
  --color-cover-to: var(--logo-magenta);         /* with the white outline brain (decoration, no text on it) */
  --color-progress-track: var(--color-border);   /* decoration only */
  --color-progress-fill: var(--logo-turquoise);  /* bar + ring fill: accent, never text */
  --color-lock-bg: #FFFFFF;
  --color-lock-text: var(--navy);                /* 12.3:1 on white */

  /* Lesson Circle + Timeline (decisions.md → LESSON FORMAT, 2026-10-14): the same 4 colours, in the same
     order, every module; the colour deepens with progress. Arcs and fills are decoration, never text. */
  --seg-1: var(--light-turquoise);
  --seg-2: var(--logo-teal);
  --seg-3: var(--logo-magenta);
  --seg-4: var(--navy);
  --color-chip-bg: var(--logo-turquoise);        /* "Start here" / "Today" chip */
  --color-chip-text: var(--navy-deep);           /* 5.9:1 on turquoise */
  --color-ring-gap: var(--color-bg);
  --color-badge-bg: #FFFFFF;                     /* ✓ badge + chevron numbers: navy on white 12.3:1 */
  --color-pause-bg: #FFFFFF;

  /* Left menu + Settings (Phase 4a, 2026-10-20) */
  --color-menu-bg: #FFFFFF;
  --color-menu-text: var(--navy);                /* 12.3:1 on white */
  --color-menu-current-bar: var(--logo-turquoise); /* accent bar beside the current item, never text */
  --color-menu-current-bg: var(--grey-warm);     /* navy on it 10.7:1 */
  --color-card-bg: #FFFFFF;
  /* Done marks (saved ticks, a finished part, a passed quiz): the calm sage green, never a group colour.
     Text 5.6:1 on its background. (Was --color-certified-*; the Certified BADGE is navy since 2026-10-23.) */
  --color-done-bg: #E2F2E8;
  --color-done-text: #1E6B43;
  --color-done-border: #A9D4BB;
  --color-badge-label-bg: var(--grey-warm);      /* other labels: navy on warm grey 10.7:1 */

  /* GROUP COLOURS — fixed app-wide (founder 2026-10-23 05:16/05:19; vault STANDARDS/founder-control-kit.md).
     Never colour a group any other way. Order everywhere: Newsletter → Free → Lifetime → VIP – In training →
     VIP – Certified. Slice/dot/avatar colours are decoration (each slice has a labelled chip with its count);
     avatar text and badge text are the measured pairs below. */
  --group-newsletter: var(--light-turquoise);    /* #4CC6CF; avatar text navy-deep 7.9:1 */
  --group-newsletter-ink: var(--navy-deep);
  --group-newsletter-badge-bg: #FFFFFF;
  --group-newsletter-badge-text: #1F5F66;        /* 7.3:1; + 1.5px border in --group-newsletter */
  --group-free: var(--logo-teal);                /* #1B99AE; avatar text navy-deep 4.75:1 */
  --group-free-ink: var(--navy-deep);
  --group-free-badge-bg: #DDF1F4;
  --group-free-badge-text: #0B5E6B;              /* 6.4:1 */
  --group-lifetime: var(--logo-purple);          /* #842C73; avatar text white 8.1:1 */
  --group-lifetime-ink: #FFFFFF;
  --group-lifetime-badge-bg: #EFE3F0;
  --group-lifetime-badge-text: #5E1F59;          /* 9.3:1 */
  --group-vip: var(--logo-magenta);              /* #C12776 = VIP – In training (CCP); avatar text white 5.5:1 */
  --group-vip-ink: #FFFFFF;
  --group-vip-badge-bg: #F7E1EC;
  --group-vip-badge-text: #8E1A56;               /* 7.0:1 */
  --group-certified: var(--navy);                /* #08336D = VIP – Certified; avatar text white 12.3:1 */
  --group-certified-ink: #FFFFFF;
  --group-certified-badge-bg: #E3EAF4;
  --group-certified-badge-text: var(--navy);     /* 10.2:1 */

  /* Founder control kit (2026-10-23): tags, step circles, AI, toast. */
  --kit-tag-bg: #FAF8F3;
  --kit-tag-border: var(--earth-tan);            /* dashed; decoration */
  --kit-tag-text: var(--earth-dark);             /* 10.6:1 on the tag background */
  --kit-current: var(--logo-magenta);            /* the current step + AI (5.5:1 on white) */
  --kit-done: var(--logo-teal);                  /* a finished step circle (white ✓ on it; decoration) */
  --kit-row-current: #F3FAFB;                    /* the open person's row; navy on it 11.7:1 */
  --kit-ai-bg: #FBF2F7;
  --kit-ai-border: #EBC3D8;
  --kit-coming: color-mix(in srgb, var(--navy) 22%, #FFFFFF);  /* calls circle: a month still to come = the Lesson Circle's not-started segment (its colour at opacity 0.22, .arc-track) on the white card (walk fix 2026-10-24; decoration) */
  --kit-skipped: #A9A6A0;                        /* calls circle: a skipped month (grey dashed; decoration) */
  --kit-state-past-bg: #E3EAF4;                  /* the drawer's "Held" pill: navy text 10.2:1 */
  --kit-state-next-bg: #F7E1EC;                  /* the drawer's "Next call" pill */
  --kit-state-next-text: #8E1A56;                /* 7.0:1 */
  --kit-radius: 16px;
  --kit-target: 44px;                            /* every button and tap target */

  /* Studies */
  --color-placeholder-bg: #FFFFFF;
  --color-placeholder-border: var(--earth-rust);  /* dashed marker around missing copy */
  --color-placeholder-text: var(--earth-dark);    /* 11.9:1 on white */
  --color-modal-backdrop: rgba(8, 51, 109, 0.55);
  --color-scale-point: var(--earth-tan);           /* unselected point ring (decoration) */
  --color-scale-selected: var(--earth-rust);       /* selected point fill */

  /* Warm/botanical side (Studies card, blend pages) */
  --color-warm-surface: var(--earth-sand);
  --color-warm-text: var(--earth-dark);   /* 8.7:1 on sand */
  --color-warm-heading: var(--earth-rust);/* 4.8:1 on sand */
  --color-warm-border: var(--earth-tan);

  /* Fonts — FINAL 2026-09-23: Montserrat headings; Raleway for paragraphs,
     buttons, labels, badges and banners (400, lining numbers on).
     Raleway carries its own ʻokina (U+02BB). Raleway 600 = **emphasis** only. */
  --font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Montserrat", var(--font-fallback);
  --font-body: "Raleway", "Montserrat", var(--font-fallback);
}