/* ==========================================================================
   Conference.care Brand Theme
   Override framework defaults with Conference.care identity.
   Primary: Blue (OKLCH hue 230, chroma 0.09)
   Font: Onest
   ========================================================================== */

@font-face {
  font-family: 'Onest';
  src: url('../fonts/Onest-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Onest-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --brand-hue: 240;   /* drives the neutral ramp + --color-page; the brand ramp sets its own per-step hue */
  --brand-chroma: 0.09;

  --font-body: 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);

  /* Navy-tinted shadows (override framework's generic grey) */
  --shadow-xs: 0 2px 6px rgba(34,82,120,.07);
  --shadow-sm: 0 4px 10px rgba(34,82,120,.08);
  --shadow-md: 0 8px 24px rgba(34,82,120,.10);
  --shadow-lg: 0 18px 44px rgba(34,82,120,.16);
  --shadow-xl: 0 30px 70px rgba(22,56,78,.28);
  /* Accent glow — for a control that is ON and gradient-filled (an active pill/tab), where a
     neutral shadow reads as flat. Brand-500 at low alpha, matching the fill it sits under. */
  --shadow-accent: 0 12px 26px rgba(67,143,185,.38);

  /* Gradients */
  /* 800 → 700 → 600, not 800 → 600 → 500: those three steps ARE the gradient's stops now,
     so it lands on the intended lightness progression without hardcoding anything. */
  --grad-deep: linear-gradient(135deg, var(--brand-800), var(--brand-700) 55%, var(--brand-600));
  --grad-hero: linear-gradient(150deg, var(--brand-950) 0%, var(--brand-800) 42%, var(--brand-600) 78%, var(--brand-500) 100%);
  --grad-line: linear-gradient(90deg, var(--brand-800), var(--brand-400));
  /* ⚠️ WCAG AA (2026-09-16): was brand-400 -> brand-500, which put white button text on a
     2.2:1-3.6:1 ground. brand-600 -> brand-700 carries white at 4.7:1-6.3:1. On a DARK band this
     darkened button sinks into its own background, so the dark-ground context in components.css
     inverts it (white pill, brand-800 text) rather than darkening it further. */
  --grad-primary: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  --grad-chip: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  --grad-ok: linear-gradient(135deg, var(--color-success), oklch(from var(--color-success) calc(l + 0.1) c h));
}