/* Clue Dental design tokens (Lane A). The only place --cd-* custom properties are
   defined; every other stylesheet reads them, and no other stylesheet of ours
   holds a raw hex color (check shell enforces both).

   Three layers (docs/planning/2026-10-27-palette-and-bands/06-final-plan.md):
     1. Primitives, --cd-color-*: raw values, never read by components.
     2. Semantic roles: what a color is for (surface, heading, body, link,
        focus...). Components read these. .cd-theme-dark, at the end of this
        file, redefines them for the dark bands, so a component works unchanged
        on either background.
     3. Component tokens: buttons, hero glow, doodles, widgets.
   Contrast figures: on white (W) and on the pale aqua tint (T); for dark-band
   roles, on the band / on a card / on the band's glow. */

:root {
  /* ══ 1. Primitives ═══════════════════════════════════════════════════ */
  /* Electric Cyan, A (Dan, 2026-10-27, replacing B Bright Aqua: "shifting
     slightly back towards blue"; docs/planning/2026-10-27-brand-color/). */
  --cd-color-aqua: #00bed8;          /* brand: logo "CLUE", glow, accents */
  --cd-color-aqua-deep: #0098ad;     /* glow's deep edge */
  --cd-color-aqua-light: #4dd6e8;    /* doodle ink */
  --cd-color-aqua-bright: #5fddf0;   /* links and focus on dark bands */
  --cd-color-aqua-button: #00a2b9;   /* primary button fill */
  --cd-color-aqua-button-hover: #0092a6;
  --cd-color-aqua-compact: #008092;  /* header button fill */
  --cd-color-aqua-text: #007282;     /* links and functional text on light */
  --cd-color-aqua-text-strong: #005b68;
  --cd-color-aqua-tint: #f0fafc;     /* pale aqua surface */
  --cd-color-aqua-chip: #dcf3f6;     /* icon chips and hover tints on light */
  /* Plans tier cards (Lane B's tier component): three dark, clearly different
     media backgrounds (Dan, 2026-10-27). Tier 1 is the night band color. */
  --cd-color-indigo: #1a1f4e;        /* tier 2 */
  --cd-color-plum: #2e1433;          /* tier 3 */
  --cd-color-tier-1-badge: #1c7a8c;  /* brighter night teal */
  --cd-color-tier-2-badge: #5560e0;  /* brighter indigo */
  --cd-color-tier-3-badge: #b23a96;  /* brighter plum */
  --cd-color-tier-1-lid: #a8e7f0;
  --cd-color-tier-1-base: #88d3dd;
  --cd-color-tier-2-lid: #53d8ea;
  --cd-color-tier-2-base: #2fc6da;
  --cd-color-tier-3-lid: #00bed8;     /* the brand color */
  --cd-color-tier-3-base: #00a2b8;
  --cd-color-ink: #13191c;
  --cd-color-ink-soft: #3a4449;
  --cd-color-slate: #5a6570;
  --cd-color-gray-line: #d5dde0;
  --cd-color-gray-control: #7c898f;
  --cd-color-white: #ffffff;
  --cd-color-heading-blue: #10375c;  /* headings and the logo's "DENTAL": deep navy, bluer than night (Dan, 2026-10-27) */
  --cd-color-night: #0b2a33;         /* dark band */
  --cd-color-night-card: #15333b;    /* card on a dark band */
  --cd-color-night-chip: #1c4a50;    /* icon chips and hover tints on dark */
  --cd-color-night-line: #2d4850;
  --cd-color-night-control: #75969f;
  --cd-color-night-muted: #a9c2c6;
  --cd-color-mist: #e8f4f5;          /* body text on dark */
  --cd-color-footer: #0e1a1f;
  --cd-color-footer-muted: #b9c6cb;
  --cd-color-coral: #ff7a59;
  --cd-color-red: #b42318;
  --cd-color-logo-gray: #7f7f7f;

  /* ══ 2. Semantic roles (light, the default) ══════════════════════════ */
  /* Surfaces */
  --cd-surface: var(--cd-color-white);
  --cd-surface-alt: var(--cd-color-night);      /* the alternate band: dark (apply .cd-theme-dark inside it) */
  --cd-surface-tint: var(--cd-color-aqua-tint); /* pale aqua: hero base, form page */
  --cd-surface-dark: var(--cd-color-footer);    /* footer; white text 17.7:1 */
  --cd-card-bg: var(--cd-color-white);
  /* Text */
  --cd-heading: var(--cd-color-heading-blue);   /* deep navy blue (Dan, 2026-10-27, "a tad more blue"): 12.19 W / 11.48 T */
  --cd-ink: var(--cd-color-ink);                /* strongest text, 17.74 W / 16.72 T */
  --cd-ink-2: var(--cd-color-ink-soft);         /* running body text, 9.99 W / 9.41 T */
  --cd-muted: var(--cd-color-slate);            /* muted text, 5.95 W / 5.60 T */
  --cd-on-dark: var(--cd-color-white);          /* labels on filled buttons and the footer */
  --cd-on-dark-muted: var(--cd-color-footer-muted); /* 10.1:1 on the footer */
  --cd-footer-line: var(--cd-color-night-line);     /* the footer's divider, decorative */
  --cd-footer-hover: var(--cd-color-night-card);    /* hovered footer link; white on it 13.39:1 */
  /* Links and accents */
  --cd-teal: var(--cd-color-aqua-text);         /* underlined links, checks: 5.63 W / 5.31 T */
  --cd-teal-strong: var(--cd-color-aqua-text-strong); /* link hover: 7.79 W / 7.34 T */
  --cd-teal-soft: var(--cd-color-aqua-tint);    /* tinted fills behind teal text */
  --cd-coral: var(--cd-color-coral);            /* one accent: kickers on dark, second chart series, stickers; never links, buttons, focus or status */
  --cd-error: var(--cd-color-red);              /* 6.57 W / 6.19 T */
  /* Lines */
  --cd-line: var(--cd-color-gray-line);         /* hairlines, decorative only */
  --cd-line-strong: var(--cd-color-gray-control); /* control borders, chart axes: 3.60 W / 3.39 T */
  --cd-chart-line: var(--cd-color-aqua-text);
  /* Focus */
  --cd-focus: var(--cd-color-aqua-text);        /* 5.63 W */
  --cd-focus-on-dark: var(--cd-color-aqua-bright); /* 9.39 on the band, 11.03 on the footer */
  --cd-focus-width: 2px;
  --cd-focus-offset: 2px;
  /* Glow inside a dark band: one stationary aqua corner glow at most this strong. */
  --cd-band-glow-alpha: 0.08;
  --cd-logo-gray: var(--cd-color-logo-gray);    /* logo "DENTAL" only */
  /* Card surface system (design pass, 06-final-plan.md item 1): white cards
     get a hairline and a restrained two-layer shadow; dark cards stay opaque
     with no shadow (redefined in .cd-theme-dark). */
  --cd-hairline: 1px solid var(--cd-line);
  --cd-shadow-card: 0 1px 2px rgba(19, 25, 28, 0.06), 0 8px 24px rgba(19, 25, 28, 0.07);
  --cd-hover-tint: var(--cd-color-aqua-chip);   /* pale aqua behind a hovered nav link */
  /* Icon chips: a 24px icon in a 40px tinted chip (item 2). */
  --cd-chip-bg: var(--cd-color-aqua-chip);
  --cd-chip-ink: var(--cd-color-aqua-text);     /* the icon's stroke */
  /* CTA panels: a soft aqua radial glow fading into the panel's base (item 4).
     Apply as  background: var(--cd-cta-glow), var(--cd-cta-bg);  */
  --cd-cta-bg: var(--cd-color-aqua-tint);
  --cd-cta-glow: radial-gradient(ellipse 75% 95% at 50% 0%, rgba(0, 190, 216, 0.16) 0%, rgba(0, 190, 216, 0.05) 45%, rgba(0, 190, 216, 0) 75%);

  /* ══ 3. Component tokens ═════════════════════════════════════════════ */
  /* Primary button: bright fill, no outline, white label. White on the fill is
     3.06:1 (hover 3.71:1), which passes only as WCAG large text, so every
     primary button label is at least 1.1875rem (19px) and 700 (base.css).
     The header's button keeps its small label on --cd-button-compact
     (#008092, 4.66:1), because the large label breaks the header (measured). */
  --cd-button: var(--cd-color-aqua-button);
  --cd-button-hover: var(--cd-color-aqua-button-hover);
  --cd-button-compact: var(--cd-color-aqua-compact);
  --cd-button-compact-hover: var(--cd-color-aqua-text);
  --cd-button-label: 1.1875rem;
  /* Hero glow and doodles. Decorative: never text or controls on white
     (#00BED8 is 2.24:1, #4DD6E8 1.74:1). */
  --cd-teal-glow: var(--cd-color-aqua);
  --cd-teal-glow-rgb: 0, 190, 216;      /* --cd-color-aqua */
  --cd-teal-glow-deep-rgb: 0, 152, 173; /* --cd-color-aqua-deep */
  --cd-doodle-teal: var(--cd-color-aqua-light);
  --cd-doodle-teal-alpha: 0.75;
  --cd-doodle-white: var(--cd-color-white);
  --cd-doodle-white-alpha: 0.85;
  --cd-doodle-ink: var(--cd-doodle-teal);
  --cd-doodle-alpha: var(--cd-doodle-teal-alpha);

  /* ── Type ──────────────────────────────────────────────────────────── */
  /* Inter from Google Fonts (src/_data/fonts.json, loaded in base.njk) with its
     optical-size axis, then the wireframe's system stack (Dan, 2026-10-27). */
  --cd-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cd-text-xs: 0.8125rem;      /* 13px */
  --cd-text-sm: 0.9375rem;      /* 15px */
  --cd-text-base: 1.0625rem;    /* 17px, body */
  --cd-text-lg: 1.25rem;        /* 20px, lead paragraphs */
  --cd-text-xl: 1.5rem;         /* 24px */
  --cd-text-h3: 1.1875rem;      /* 19px */
  --cd-text-h2: clamp(1.75rem, 4vw, 2.625rem);
  --cd-text-h1: clamp(2.25rem, min(4.5vw, 7.5vh), 4rem);
  --cd-leading-body: 1.6;
  --cd-leading-snug: 1.3;
  --cd-leading-tight: 1.12;
  --cd-tracking-tight: -0.015em;
  --cd-weight-regular: 400;
  --cd-weight-medium: 500;
  --cd-weight-semibold: 600;
  --cd-weight-bold: 700;
  --cd-measure: 42rem;          /* reading width for body copy, about 75 characters */

  /* ── Spacing ───────────────────────────────────────────────────────── */
  --cd-space-1: 0.25rem;
  --cd-space-2: 0.5rem;
  --cd-space-3: 0.75rem;
  --cd-space-4: 1rem;
  --cd-space-5: 1.5rem;
  --cd-space-6: 2rem;
  --cd-space-7: 3rem;
  --cd-space-8: 4rem;
  --cd-space-9: 6rem;
  --cd-section-y: clamp(3.5rem, 8vw, 6rem);   /* vertical rhythm between bands */

  /* ── Layout ────────────────────────────────────────────────────────── */
  --cd-max: 70rem;              /* 1120px content width, as in the wireframe */
  --cd-gutter: 1.5rem;          /* 1rem on phones, below */
  --cd-header-h: 4rem;          /* the sticky header's fixed height */
  --cd-header-gutter: 1.75rem;  /* 28px: the full-width header's side inset; the phone gutter below 47.5em */

  /* ── Shape and depth ───────────────────────────────────────────────── */
  /* Design pass radii: 8px controls, 12px cards, 20px major media and CTA
     panels, pill buttons. The older sm/md/lg names map onto them. */
  --cd-radius-control: 0.5rem;  /* 8px: inputs, nav hovers, icon buttons */
  --cd-radius-card: 0.75rem;    /* 12px: cards, form and result panels */
  --cd-radius-panel: 1.25rem;   /* 20px: major media, CTA panels */
  --cd-radius-pill: 999px;      /* buttons */
  --cd-radius-sm: var(--cd-radius-control);
  --cd-radius-md: var(--cd-radius-card);
  --cd-radius-lg: var(--cd-radius-panel);
  --cd-chip-size: 2.5rem;       /* 40px */
  --cd-chip-icon: 1.5rem;       /* 24px */
  --cd-chip-radius: var(--cd-radius-control);
  --cd-shadow-sm: 0 1px 2px rgba(19, 25, 28, 0.08);
  --cd-shadow-md: 0 6px 20px rgba(19, 25, 28, 0.12);
  --cd-shadow-menu: -4px 0 20px rgba(19, 25, 28, 0.15);
  --cd-overlay: rgba(14, 26, 31, 0.5);  /* behind the open slide menu */
  /* The hero's curved bottom edge (Lane B). Pure black at low opacity (Dan:
     "make that black and much less opaque"). --cd-edge-shadow is one shadow,
     usable as  filter: drop-shadow(var(--cd-edge-shadow));  or box-shadow. */
  --cd-edge-line: rgba(0, 0, 0, 0.07);          /* the 1px line along the curve */
  --cd-edge-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  /* Plans tier cards (Lane B): dark media backgrounds. White text on them:
       tier 1 #0B2A33 15.07:1 (9.74 at the glow's center)
       tier 2 #1A1F4E 15.56:1 (10.21 at the glow's center)
       tier 3 #2E1433 16.61:1 (10.50 at the glow's center)
     The laptop tints stay readable as shapes (lid / base against the plain
     background, then at the glow's center): tier 1 11.02 / 8.91, 7.12 / 5.76;
     tier 2 9.17 / 7.56, 6.02 / 4.96; tier 3 7.40 / 5.43, 4.68 / 3.43.
     Bubbles: white at 92%, about 13:1 to 14.5:1 against each background; the
     icon inside takes the tier's own dark color (13.2 / 13.58 / 14.48:1 on the
     bubble) or --cd-teal (4.9:1). Glows: a lighter tone of each background's
     hue, low alpha, for a radial gradient behind the laptop. */
  --cd-tier-1-bg: var(--cd-color-night);
  --cd-tier-2-bg: var(--cd-color-indigo);
  --cd-tier-3-bg: var(--cd-color-plum);
  --cd-tier-1-lid: var(--cd-color-tier-1-lid);
  --cd-tier-1-base: var(--cd-color-tier-1-base);
  --cd-tier-2-lid: var(--cd-color-tier-2-lid);
  --cd-tier-2-base: var(--cd-color-tier-2-base);
  --cd-tier-3-lid: var(--cd-color-tier-3-lid);
  --cd-tier-3-base: var(--cd-color-tier-3-base);
  --cd-tier-1-glow: rgba(0, 190, 216, 0.22);    /* brand cyan over night */
  --cd-tier-2-glow: rgba(91, 99, 201, 0.40);    /* lighter indigo, #5B63C9 */
  --cd-tier-3-glow: rgba(161, 79, 174, 0.40);   /* lighter plum, #A14FAE */
  /* Corner badges: a brighter version of each tier's background, with a white
     bold label: white on them 4.99:1, 5.08:1, 5.33:1. */
  --cd-tier-1-badge: var(--cd-color-tier-1-badge);
  --cd-tier-2-badge: var(--cd-color-tier-2-badge);
  --cd-tier-3-badge: var(--cd-color-tier-3-badge);
  --cd-tier-bubble: rgba(255, 255, 255, 0.92);
  --cd-tier-bubble-border: rgba(255, 255, 255, 0.6);
  --cd-tier-1-bubble-ink: var(--cd-color-night);
  --cd-tier-2-bubble-ink: var(--cd-color-indigo);
  --cd-tier-3-bubble-ink: var(--cd-color-plum);
  /* Soft drop shadow under the laptops: pure black, low opacity, like the
     edge shadow; usable as  filter: drop-shadow(var(--cd-laptop-shadow));  */
  --cd-laptop-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);

  /* ── Motion (design pass item 6). Under prefers-reduced-motion or
     html.clue-motion-paused, base.css removes transitions and smooth scroll;
     reveal and draw-on scripts show the end state at once. ────────────── */
  --cd-duration: 0.3s;              /* the slide-out menu */
  --cd-ease: ease;
  --cd-duration-fast: 160ms;        /* hovers, color changes, the arrow nudge */
  --cd-duration-reveal: 500ms;      /* section intros and steps: 12px fade-up */
  --cd-duration-media: 600ms;       /* major media: fade only */
  --cd-duration-draw: 700ms;        /* chart line draw-on, once */
  --cd-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cd-reveal-distance: 0.75rem;    /* 12px */
  --cd-reveal-stagger: 70ms;
  --cd-reveal-stagger-max: 140ms;
  --cd-nudge: 0.125rem;             /* 2px, arrow links */

  /* ── Stacking (the template's values, so the chat and Sienna layer as they do there) */
  --cd-z-header: 1050;
  --cd-z-overlay: 1065;
  --cd-z-menu: 1070;

  /* ── Widgets (unchanged template files read these names) ────────────── */
  /* Sienna (sienna.css) needs 4.5:1 under white text and as text on #fff and
     #eff1f5, which the button fill cannot meet (3.06:1, 2.70:1), so it takes
     the functional aqua: 5.63:1 under white, 4.98:1 on #eff1f5. */
  --sienna-color: var(--cd-color-aqua-text);
  /* The chat (clue-ai.css) puts normal-size white text on --primary-color and
     --primary-color text on #e9ecef, so it takes the functional pair too
     (5.63:1 and 4.75:1). Primitives, so a dark band never changes them. */
  --primary-color: var(--cd-color-aqua-text);
  --primary-color-dark: var(--cd-color-aqua-text-strong);
}

/* Phones: a 16px side gutter. */
@media (max-width: 47.5em) {
  :root {
    --cd-gutter: 1rem;
    --cd-header-gutter: var(--cd-gutter);
  }
}

/* ══ Dark bands ═══════════════════════════════════════════════════════
   .cd-theme-dark on a band redefines the semantic roles for #0B2A33, and
   sets the band's own background and text color so inherited text inverts
   too. Contrast: on the band / on a card / on the 8% glow. */
.cd-theme-dark {
  --cd-surface: var(--cd-color-night);
  --cd-card-bg: var(--cd-color-night-card);        /* opaque */
  --cd-heading: var(--cd-color-aqua);              /* 6.72 / 5.97 / 5.80 */
  --cd-ink: var(--cd-color-white);                 /* 15.07 / 13.39 / 13.01 */
  --cd-ink-2: var(--cd-color-mist);                /* 13.41 / 11.92 / 11.58 */
  --cd-muted: var(--cd-color-night-muted);         /* 8.05 / 7.15 / 6.95 */
  --cd-teal: var(--cd-color-aqua-bright);          /* 9.39 / 8.34 / 8.11 */
  --cd-teal-strong: var(--cd-color-white);         /* link hover */
  --cd-teal-soft: var(--cd-color-night-card);
  --cd-line: var(--cd-color-night-line);
  --cd-line-strong: var(--cd-color-night-control); /* 4.75 / 4.22 / 4.10 */
  --cd-chart-line: var(--cd-color-aqua);
  --cd-focus: var(--cd-color-aqua-bright);
  --cd-hairline: 1px solid var(--cd-color-night-line);
  --cd-shadow-card: none;                          /* dark cards stay opaque, flat */
  --cd-hover-tint: var(--cd-color-night-chip);
  --cd-chip-bg: var(--cd-color-night-chip);
  --cd-chip-ink: var(--cd-color-aqua-bright);
  --cd-cta-bg: var(--cd-color-night-card);
  --cd-cta-glow: radial-gradient(ellipse 75% 95% at 50% 0%, rgba(0, 190, 216, 0.08) 0%, rgba(0, 190, 216, 0.03) 45%, rgba(0, 190, 216, 0) 75%); /* 8% cap */
  background-color: var(--cd-surface);
  color: var(--cd-ink-2);
}

/* The footer is dark but not a band: it keeps its own colors and takes the
   on-dark focus ring. */
.cd-on-dark { --cd-focus: var(--cd-focus-on-dark); }