/* TAILORBLEND design system values, copied unchanged from Kirsten's colors_and_type.css (design system v2). To change a
   colour, change it here. Her file's @font-face and heading, paragraph and link rules are left out: Montserrat loads
   from Google Fonts in App.razor, and those rules would also restyle the home page and legacy's markup. */

:root {
  /* ---------- Brand — canonical hex (teal) ---------- */
  --tb-teal:            #55C3B6;   /* base brand — large text / decorative */
  --tb-teal-light:      #89DCCD;
  --tb-teal-lighter:    #D4F5EE;
  --tb-teal-dark:       #2D8F85;
  --tb-teal-accessible: #1C7A6E;   /* WCAG AA, interactive text/icons */
  --tb-teal-accessible-light: #59C8B8;
  --tb-teal-ui:         #5BBFB3;   /* the value used inline across landing */
  --tb-teal-ui-dark:    #3A9E92;   /* button press/border for #5BBFB3 */
  --tb-teal-ui-darker:  #4BA99C;   /* user-message bubble fill */
  --tb-teal-tint:       #E8F5F3;
  --tb-teal-tint-border:#D7ECE8;
  --tb-teal-wash:       #F3F9F8;
  --tb-bg-site:         #FFFFFF;
  --tb-bg-portal:       #FFFFFF;
  --tb-bg-muted:        #F3F4F4;
  --tb-warning-bg:      #FDF3E1;
  --tb-warning-text:    #9A5B00;
  --tb-danger:          #DC4E4E;

  /* HSL triplets (for /opacity modifiers, if you rebuild in Tailwind) */
  --color-brand-teal:           173 48% 55%;
  --color-brand-teal-light:     169 54% 70%;
  --color-brand-teal-lighter:   167 62% 90%;
  --color-brand-teal-dark:      174 52% 37%;
  --color-brand-teal-accessible:        174 65% 32%;
  --color-brand-teal-accessible-light:  170 58% 60%;

  /* ---------- Neutrals — true neutral grey (never blue) ---------- */
  /* Teal is the ONLY chromatic colour. Greys are pure neutrals. */
  --slate-50:  #FAFAFA;
  --slate-100: #F4F4F4;
  --slate-200: #E8E8E8;
  --slate-300: #D4D4D4;
  --slate-400: #A3A3A3;
  --slate-500: #737373;
  --slate-600: #525252;
  --slate-700: #404040;
  --slate-800: #2E2E2E;
  --slate-900: #1F1F1F;
  --slate-950: #141414;

  /* Semantic surfaces (light mode only; product is single-mode) */
  --bg:              #FAFAFA;          /* body / section bg */
  --bg-card:         #FFFFFF;          /* primary card */
  --charcoal:        #1F1F1F;          /* dark surfaces — true neutral, not blue */
  --charcoal-soft:   #3A3A3A;          /* softer grey sibling (used for dark gradients) */
  --grey-text:       #4A4A4A;          /* body text on light bg — neutral grey */
  --border:          rgba(228,228,228,0.6);
  --border-strong:   #E8E8E8;
  --border-accent:   rgba(91,191,179,0.5);

  /* Foreground */
  --fg1:        var(--slate-900);  /* headings */
  --fg2:        var(--slate-800);  /* strong body */
  --fg3:        var(--slate-700);  /* standard body */
  --fg-muted:   var(--slate-500);  /* supporting text */
  --fg-faint:   var(--slate-400);  /* eyebrow / meta */
  --fg-on-dark: #FFFFFF;
  --fg-on-dark-muted: rgba(255,255,255,0.6);

  /* State */
  --destructive:    #DC4E4E;
  --warning:        #F59E0B;
  --success:        var(--tb-teal-accessible);

  /* ---------- Typography families ---------- */
  --font-sans:    'Montserrat', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Montserrat', system-ui, sans-serif;   /* v2.0: no serif */
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Base type tokens (fluid scale) ---------- */
  --type-display-2xl: clamp(3rem, 8vw, 5.5rem);        /* hero words */
  --type-display-xl:  clamp(2.5rem, 6vw, 4.5rem);
  --type-display-lg:  clamp(2rem, 5vw, 3.5rem);
  --type-heading-xl:  clamp(1.75rem, 4vw, 3rem);
  --type-heading-lg:  clamp(1.5rem, 3.5vw, 2.5rem);    /* section h2 */
  --type-heading-md:  clamp(1.25rem, 3vw, 2rem);
  --type-heading-sm:  clamp(1.125rem, 2.5vw, 1.5rem);
  --type-body-lg:     clamp(1.125rem, 2vw, 1.25rem);
  --type-body-md:     clamp(1rem, 1.5vw, 1.125rem);
  --type-body-sm:     clamp(0.875rem, 1.25vw, 1rem);
  --type-body-xs:     clamp(0.75rem, 1vw, 0.875rem);
  --type-micro:       10px;    /* the signature eyebrow size */
  --type-nano:        9px;     /* BioBadge / data label */

  /* Signature tracking values */
  --track-tightest: -0.035em;   /* huge uppercase headlines ("tracking-tighter") */
  --track-tight:    -0.015em;
  --track-wide:     0.05em;
  --track-wider:    0.12em;     /* BioBadge */
  --track-widest:   0.2em;      /* eyebrow labels */
  --track-eyebrow:  0.32em;      /* THE "CLINICAL PROCESS" style */

  /* ---------- Spacing ---------- */
  --space-section:   clamp(4rem, 10vw, 8rem);     /* py between big sections */
  --space-container: clamp(3rem, 8vw, 6rem);
  --space-element:   clamp(2.5rem, 6vw, 4rem);
  --space-card:      clamp(1.5rem, 4vw, 2.5rem);
  --space-group:     clamp(1rem, 3vw, 1.5rem);

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   8px;      /* v2.0: controls and cards are 8px */
  --radius-lg:   8px;
  --radius-xl:   12px;     /* modals */
  --radius-2xl:  8px;
  --tb-radius-control: 8px;
  --tb-radius-card:    8px;
  --tb-radius-modal:   12px;
  --tb-radius-menu:    6px;
  --radius-pill: 9999px;

  /* ---------- Shadows: v2.0 is flat ---------- */
  --shadow-sm:     none;
  --shadow-md:     none;
  --shadow-lg:     none;
  --shadow-xl:     none;
  --shadow-card:   none;
  --shadow-dark:   none;
  --shadow-clinical: none;
  --glow-teal:     none;
  --glow-teal-lg:  none;
  --tb-shadow-menu:   0 12px 30px -10px rgba(0,0,0,0.15);
  --tb-shadow-focus:  0 0 0 3px rgba(85,195,182,0.18);
  --tb-shadow-toggle: 0 1px 3px rgba(0,0,0,0.08);

  /* ---------- Motion ---------- */
  --ease-out-soft: cubic-bezier(0.04, 0.62, 0.23, 0.98);
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:      150ms;
  --dur-base:      300ms;
  --dur-slow:      500ms;
  --dur-slower:    700ms;
}

/* From her components/bundle.css, which this site does not load: we keep our own class names. */
:root {
  --tb-gradient-dark: linear-gradient(135deg, #2E2E2E, #1F1F1F);
  --tb-lift: translateY(-2px);
}