/* ════════════════════════════════════════════════════════════════════════
   Dental Agents — Design tokens
   Sourced from the Dental Agents Design System (claude.ai/design handoff).
   Playful & warm, but trustworthy. Teal leads; coral + sunny yellow add the
   human energy; deep warm-navy ink grounds it.
   ════════════════════════════════════════════════════════════════════════ */

/* SUBSTITUTION: no brand font binaries were provided — load the closest free
   Google Fonts. Swap for licensed/self-hosted files when available. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Brand: Teal (primary) ─────────────────────────────────────── */
  --teal-50:  #EDFBF8;
  --teal-100: #D6F5EF;
  --teal-200: #AEEBE1;
  --teal-300: #79DCCF;
  --teal-400: #43C8B8;
  --teal-500: #14B5A4;   /* brand primary */
  --teal-600: #0E9385;
  --teal-700: #0B7468;
  --teal-800: #0A5A51;
  --teal-900: #0A4842;

  /* ── Accent: Coral (warm) ──────────────────────────────────────── */
  --coral-50:  #FFF1EB;
  --coral-100: #FFE2D6;
  --coral-200: #FFC6AE;
  --coral-300: #FFA585;
  --coral-400: #FF855C;
  --coral-500: #FF6B3D;   /* warm accent */
  --coral-600: #ED5526;
  --coral-700: #C6411A;

  /* ── Highlight: Sunny yellow ───────────────────────────────────── */
  --sun-100: #FFF2CC;
  --sun-200: #FFE49B;
  --sun-300: #FFD45F;
  --sun-400: #FFC83D;
  --sun-500: #F2B215;

  /* ── Ink / warm slate neutrals ─────────────────────────────────── */
  --ink-950: #0C1722;
  --ink-900: #122231;   /* strongest text */
  --ink-800: #1E3346;
  --ink-700: #324859;
  --ink-600: #4B6171;
  --ink-500: #687C8A;   /* muted text */
  --ink-400: #8B9CA8;
  --ink-300: #B3C0C9;
  --ink-200: #D6DEE3;
  --ink-100: #E8EEF1;
  --ink-50:  #F3F7F9;

  /* ── Paper / surfaces ──────────────────────────────────────────── */
  --white:   #FFFFFF;
  --cream:   #FBFAF6;   /* warm app/page paper */
  --cream-2: #F5F3EC;   /* slightly deeper warm panel */

  /* ── Semantic status ───────────────────────────────────────────── */
  --green-500:  #18A957;  --green-100: #DBF4E5;  --green-700: #0E7B3D;
  --amber-500:  #F2A413;  --amber-100: #FCEFCF;  --amber-700: #B97908;
  --red-500:    #E5484D;  --red-100:   #FBDDDE;  --red-700:   #B42D31;
  --blue-500:   #3E7BFA;  --blue-100:  #DDE8FF;  --blue-700:  #2456C8;

  /* ── Semantic aliases ──────────────────────────────────────────── */
  --brand:            var(--teal-500);
  --brand-hover:      var(--teal-600);
  --brand-press:      var(--teal-700);
  --brand-soft:       var(--teal-100);
  --brand-subtle:     var(--teal-50);
  --on-brand:         var(--white);

  --accent:           var(--coral-500);
  --accent-hover:     var(--coral-600);
  --accent-soft:      var(--coral-100);

  --highlight:        var(--sun-400);
  --highlight-soft:   var(--sun-100);

  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-faint:       var(--ink-400);
  --text-on-dark:     #EAF3F2;

  --surface-page:     var(--cream);
  --surface-card:     var(--white);
  --surface-sunken:   var(--cream-2);
  --surface-inverse:  var(--ink-900);

  --border-subtle:    var(--ink-100);
  --border:           var(--ink-200);
  --border-strong:    var(--ink-300);
  --focus-ring:       color-mix(in srgb, var(--teal-500) 45%, transparent);

  --success: var(--green-500);
  --warning: var(--amber-500);
  --danger:  var(--red-500);
  --info:    var(--blue-500);

  /* ── Typography ────────────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ── Corner radii ──────────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;

  /* ── Shadows (warm-tinted, soft) ───────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(18, 34, 49, 0.06);
  --shadow-sm:  0 2px 6px rgba(18, 34, 49, 0.07);
  --shadow-md:  0 6px 18px rgba(18, 34, 49, 0.09);
  --shadow-lg:  0 16px 40px rgba(18, 34, 49, 0.12);
  --shadow-xl:  0 28px 70px rgba(18, 34, 49, 0.16);
  --shadow-brand: 0 10px 26px rgba(20, 181, 164, 0.30);
  --shadow-coral: 0 10px 26px rgba(255, 107, 61, 0.28);
  --shadow-inset: inset 0 1px 2px rgba(18, 34, 49, 0.08);

  /* ── Motion ────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur:         200ms;
  --dur-slow:    320ms;
}