/* =====================================================================
   Client-facing design tokens — scoped to the patient portal.
   ===================================================================== */
:root, .pricing-page {
    /* Colors */
    --primary: #26786A; /* AA: #2D8B7A was 4.12:1 on white (text & white-on-fill); #26786A clears 4.5:1 incl. tinted bgs */
    --primary-light: #3DA899;
    --primary-dark: #1F6B5F;
    --primary-subtle: rgba(45, 139, 122, 0.08);

    --accent: #E8985E;

    /* Clanics Brand Colors — aliased to the canonical --primary scale
       above so the brand teal has ONE source of truth (var(--primary)). The
       prior values (#2D7D6F, #1D5D4F, and the rgba(45,125,111,*) pair)
       were drifted variants that read as the same teal on screen;
       collapsed per CSS_TOKENS_AUDIT.md §10.1. Names kept for back-
       compat with the seven existing call sites in this file. */
    --clanics-primary: var(--primary);

    /* Page background — the --page-bg SINGLE SOURCE OF TRUTH now lives in
       base-tokens.css (loaded first, shared by every portal). These
       tokens just point at it; white cards (--surface) and accent tints
       stay separate. */
    --bg: var(--page-bg);
    --bg-warm: var(--page-bg);
    --surface: #FFFFFF;
    --bg-primary: var(--page-bg);
    --bg-secondary: #FFFFFF;
    --bg-card: #FFFFFF;

    --text: #2b3039;
    --text-primary: var(--text);
    /* --text-secondary / --text-faint now live in base-tokens.css (shared).
       The legacy --text-muted / --text-tertiary tokens stay here as
       aliases onto the shared faint tier so existing usages keep working. */
    --text-muted: var(--text-faint);
    --text-tertiary: var(--text-faint);
    --text-inverse: #FFFFFF;

    --border: #E8E4DF;
    --border-light: #F2EFEA;
    --border-medium: #D0C9C0;

    /* Darkened for WCAG AA: #3DAA8C scored 2.87:1 as text on white, #E85A5A
       3.48:1. New values clear 4.5:1 on white AND on the tinted table cells
       (#eef6f4) and improve white-on-fill contrast too. */
    --success: #1f6e57;
    --error: #cf4040;
    /* Deeper danger red for high-contrast destructive surfaces (delete
       buttons, validation errors). Per CSS_TOKENS_AUDIT.md §10.3 —
       collapsed from #C92A2A / #C73838 / #C62828 / #DC2626. */
    --warning: #F5A623;

    /* Z-index scale (--z-*) now lives in base-tokens.css — use the named
       tokens, never raw numbers. Per CSS_TOKENS_AUDIT.md §9. */

    /* Typography — --font-display and --font-body now live in base-tokens.css (shared by
       both portals, single source of truth). */

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-4xl: 2.25rem;

    /* Font weights (--weight-*) and spacing (--space-*) now live in
       base-tokens.css, loaded before this file. */

    /* Sizes */
    --sidebar-width: 72px;
    --chat-panel-width: 380px;
    --mobile-header: 56px;

    /* Radius */
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(26, 43, 60, 0.04);
    --shadow-md: 0 4px 12px rgba(26, 43, 60, 0.08);
    --shadow-lg: 0 8px 30px rgba(26, 43, 60, 0.12);
    --shadow-2xl: 0 25px 50px -12px rgba(26, 43, 60, 0.25);

    /* Indigo Accents for Pricing Psychology */
    --indigo: #6366F1;
    --indigo-dark: #4F46E5;
    --indigo-darker: #3730A3;
    --indigo-subtle: rgba(99, 102, 241, 0.1);
    --indigo-glow: rgba(99, 102, 241, 0.15);
    --indigo-glow-strong: rgba(99, 102, 241, 0.25);
    --indigo-glow-pulse: rgba(99, 102, 241, 0.35);

    /* Transitions */
    --transition: 200ms ease;
    --transition-slow: 400ms ease;
}