/*
 * Design tokens. Source: design1.webp reference (see docs/design-system.md).
 * Variables only: this file styles nothing on its own. Load it before app.css,
 * after the Google Fonts link (Outfit 500/600, Nunito Sans 400/600/700).
 * "sampled" = read from the reference pixels; other ramp steps are derived.
 */
:root {
	/* ---- Brand: teal (primary) ---- */
	--teal-50:  #EEF8F6;
	--teal-100: #DDF2EF;   /* sampled: mint card, testimonial band, mint tag, icon tile */
	--teal-200: #B8E3DD;
	--teal-300: #7FCBC2;
	--teal-500: #14A39C;
	--teal-600: #0E8C86;   /* sampled: buttons, active chip, icons, CTA band */
	--teal-700: #0A7A75;   /* sampled (text): eyebrows, links, mint-tag text. AA 5.2:1 on white */
	--teal-800: #08605C;
	--teal-900: #064744;

	/* ---- Brand: navy (ink + dark surfaces) ---- */
	--navy-900: #14223D;   /* sampled: headings, dark sections, footer, dark buttons */
	--navy-800: #1E2D4A;
	--navy-700: #2C3751;   /* sampled: input on navy */
	--navy-600: #3D4966;

	/* ---- Accent: sunshine yellow ---- */
	--yellow-100: #FFF3CE; /* sampled: cream card, cream tag */
	--yellow-200: #FDE7A3;
	--yellow-400: #FFD25B; /* sampled: dots, stars, step 1, VS badge, arrow badge, text on navy */
	--yellow-600: #E5B732;
	--yellow-800: #8A6A0E;

	/* ---- Accent: coral (urgent / danger) ---- */
	--coral-100: #FEE4DD;  /* sampled: peach card, coral tag */
	--coral-400: #ED7051;  /* sampled: bars, bullet dots */
	--coral-700: #B8472B;  /* text-safe coral (design's coral text is ~#C4573A; darkened for AA) */

	/* ---- Secondary tints (tags + card backgrounds; text on them is navy) ---- */
	--sky-100: #E4F0FA;    /* sampled: newborn card, blue tag */
	--sky-400: #7DB7F0;    /* derived: accent on navy (icons) */
	--lavender-100: #EDE8F9; /* sampled: lavender tag */
	--lavender-400: #B29DF0; /* derived: accent on navy (icons) */

	/* ---- Neutrals ---- */
	--white:    #FFFFFF;
	--gray-50:  #F5F9FA;   /* sampled: page background */
	--gray-75:  #F6F8FA;   /* sampled: inset panel */
	--gray-100: #EEF2F4;
	--gray-200: #E5E9EC;   /* sampled: card borders, dividers, chip borders */
	--gray-300: #DFE5EA;   /* sampled: progress track */
	--gray-400: #A3ADB8;
	--gray-500: #8A919C;   /* placeholders, disabled only (not for readable text) */
	--gray-600: #525A66;   /* sampled: body AND secondary text (the design uses one gray) */

	/* ---- Semantic colour roles ---- */
	--color-bg:            var(--gray-50);
	--color-surface:       var(--white);
	--color-surface-inset: var(--gray-75);
	--color-surface-dark:  var(--navy-900);
	--color-surface-brand: var(--teal-600);
	--color-text:          var(--navy-900);   /* headings, labels, strong text, tag text */
	--color-text-body:     var(--gray-600);
	--color-text-muted:    var(--gray-600);   /* same as body in the design; kept as its own role */
	--color-text-placeholder: var(--gray-500);
	--color-text-inverse:  var(--white);
	--color-text-inverse-muted: rgba(255, 255, 255, .88);
	--color-border:        var(--gray-200);
	--color-border-strong: var(--navy-900);   /* outline buttons */
	--color-border-inverse: rgba(255, 255, 255, .15);
	--color-primary:       var(--teal-600);
	--color-primary-hover: var(--teal-700);
	--color-primary-soft:  var(--teal-100);
	--color-primary-text:  var(--teal-700);   /* teal text on light backgrounds */
	--color-accent:        var(--yellow-400);
	--color-accent-soft:   var(--yellow-100);
	--color-success:       var(--teal-600);
	--color-success-soft:  var(--teal-100);
	--color-success-text:  var(--teal-700);
	--color-warning:       var(--yellow-400);
	--color-warning-soft:  var(--yellow-100);
	--color-warning-text:  var(--navy-900);
	--color-danger:        var(--coral-400);
	--color-danger-soft:   var(--coral-100);
	--color-danger-text:   var(--coral-700);
	--color-info-soft:     var(--sky-100);
	--color-info-text:     var(--navy-900);
	--color-focus-ring:    rgba(14, 140, 134, .35);
	/* dark-surface effects: teal glow (teal-600) and frosted glass on navy */
	--glow-teal:    rgba(14, 140, 134, .38);
	--glass-bg:     rgba(255, 255, 255, .07);
	--glass-border: rgba(255, 255, 255, .14);
	--glass-blur:   10px;

	/* ---- Typography ---- */
	--font-display: 'Outfit', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* sizes measured from cap heights (cap = .70em for both fonts) and verified by text width */
	--fs-display: 4.5rem;    /* 72px  hero h1                                  Outfit 600 */
	--fs-stat:    4rem;      /* 64px  big numbers ("$1,250")                   Outfit 600 */
	--fs-h1:      3.25rem;   /* 52px  section title                            Outfit 600 */
	--fs-h2:      2.125rem;  /* 34px  large card title, clinic name            Outfit 600 */
	--fs-h3:      1.5rem;    /* 24px  card/step/team/blog title, quote         Outfit 600 */
	--fs-h4:      1.25rem;   /* 20px  FAQ question, feature-list title, logo   Outfit 500 */
	--fs-h5:      1.125rem;  /* 18px  small emphasis ("Today, 3:40 PM")        Outfit 500 */
	--fs-lead:    1.25rem;   /* 20px  hero / intro paragraph                   Nunito Sans 400 */
	--fs-body:    1rem;      /* 16px  paragraphs                               Nunito Sans 400 */
	--fs-sm:      .9375rem;  /* 15px  buttons 700, nav 600, meta + captions 400, small card text */
	--fs-xs:      .8125rem;  /* 13px  tags 700, eyebrows 700                   Nunito Sans */

	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;

	--lh-display: 1.04;  /* 72px */
	--lh-h1:      1.1;   /* 52px */
	--lh-heading: 1.2;   /* 34px */
	--lh-title:   1.25;  /* 18-24px multi-line titles and quotes */
	--lh-lead:    1.5;
	--lh-body:    1.6;
	--lh-tight:   1.2;   /* single-line UI text: buttons, tags, nav */

	--ls-display: -.03em;  /* 64-72px */
	--ls-heading: -.02em;  /* 34-52px */
	--ls-title:   -.01em;  /* 18-24px Outfit */
	--ls-body:    0;       /* Nunito Sans is never tracked, except: */
	--ls-eyebrow: .08em;   /* uppercase eyebrows */
	--ls-caps:    .03em;   /* uppercase status tags */

	/* ---- Spacing (4px base) ---- */
	--space-1: .25rem;  /* 4  */
	--space-2: .5rem;   /* 8  */
	--space-3: .75rem;  /* 12 */
	--space-4: 1rem;    /* 16 */
	--space-5: 1.25rem; /* 20 */
	--space-6: 1.5rem;  /* 24  card grid gap */
	--space-7: 1.75rem; /* 28  nested card padding, button padding-x */
	--space-8: 2rem;    /* 32  nav gap, standard card padding */
	--space-10: 2.5rem; /* 40  feature card padding */
	--space-12: 3rem;   /* 48 */
	--space-16: 4rem;   /* 64  section header -> content */
	--space-20: 5rem;   /* 80 */
	--space-30: 7.5rem; /* 120 section padding (marketing) */

	--container-max: 1280px;
	--gutter: 1.5rem;

	/* ---- Radius (measured from corner curves) ---- */
	--radius-sm:   12px;   /* icon tiles, logo mark */
	--radius-md:   16px;   /* floating info cards, chat bubbles, textareas */
	--radius-lg:   20px;   /* card nested inside a panel */
	--radius-xl:   32px;   /* cards, panels, photos, CTA band */
	--radius-pill: 999px;  /* buttons, chips, tags, inputs, progress bars */
	--radius-circle: 50%;

	/* ---- Elevation (navy-tinted; standard cards use a border instead) ---- */
	--shadow-xs: 0 1px 2px rgba(20, 34, 61, .06);   /* app header bar */
	--shadow-sm: 0 8px 24px rgba(20, 34, 61, .06);  /* card nested in a panel */
	--shadow-md: 0 12px 32px rgba(20, 34, 61, .10); /* floating cards, testimonials, badges over images */
	--shadow-lg: 0 24px 56px rgba(20, 34, 61, .14); /* modals, dropdowns */
	--shadow-focus: 0 0 0 4px var(--color-focus-ring);

	/* ---- Component sizes ---- */
	--btn-height:      52px;   /* measured 52-54 everywhere in the design */
	--btn-height-sm:   40px;   /* dense admin tables/toolbars (not in the design) */
	--btn-pad-x:       1.75rem;
	--btn-border-width: 1.5px;
	--btn-arrow-badge: 36px;   /* yellow circle inside the dark button */
	--chip-height:     40px;
	--chip-pad-x:      1.125rem;
	--tag-height:      28px;
	--tag-pad-x:       .75rem;
	--input-height:    52px;
	--icon-tile:       48px;
	--logo-mark:       44px;
	--step-circle:     56px;
	--vs-badge:        60px;
	--avatar-sm:       40px;   /* stacked avatars, 2px white ring, -8px overlap */
	--avatar-md:       48px;   /* testimonial author */
	--progress-height: 8px;
	--eyebrow-dot:     8px;
	--carousel-dot:    8px;    /* active: 32px wide pill */
	--header-height:   110px;
	--sidebar-width:   260px;  /* admin only */

	/* ---- Motion ---- */
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--duration-fast: 120ms;
	--duration:      200ms;
	--duration-slow: 320ms;
}