/* ============================================================
   NammaCare — Color tokens
   Teal + white healthcare palette. Cool, clean, clinical-calm.
   ============================================================ */
:root {
  /* --- Brand teal scale --- */
  --teal-50:  #EAFBF8;
  --teal-100: #CFF5EF;
  --teal-200: #9FE9E0;
  --teal-300: #63D6CB;
  --teal-400: #2FBFB2;
  --teal-500: #12A594;  /* primary */
  --teal-600: #0E877A;
  --teal-700: #0C6B61;
  --teal-800: #0B544D;
  --teal-900: #0A423D;

  /* --- Deep ink (editorial dark, from source repo's black) --- */
  --ink-900: #0C1413;
  --ink-800: #12201E;

  /* --- Cool neutral / slate scale --- */
  --gray-0:   #FFFFFF;
  --gray-50:  #F6F9F9;
  --gray-100: #EEF3F3;
  --gray-200: #DFE7E7;
  --gray-300: #C6D2D2;
  --gray-400: #9BABAB;
  --gray-500: #6C7C7C;
  --gray-600: #4D5B5B;
  --gray-700: #384444;
  --gray-800: #232D2D;
  --gray-900: #121A1A;

  /* --- Semantic hues --- */
  --green-500:  #1FA971;  /* healthy / success */
  --green-50:   #E7F7EF;
  --amber-500:  #E0982E;  /* caution / attention */
  --amber-50:   #FCF3E3;
  --red-500:    #E5484D;  /* alert / danger */
  --red-50:     #FCEBEC;
  --blue-500:   #3E7BFA;  /* info */
  --blue-50:    #EAF1FE;

  /* ============ Semantic aliases ============ */
  --brand:            var(--teal-500);
  --brand-hover:      var(--teal-600);
  --brand-active:     var(--teal-700);
  --brand-subtle:     var(--teal-50);
  --brand-border:     var(--teal-200);
  --on-brand:         #FFFFFF;

  --bg-page:          var(--gray-50);
  --bg-elevated:      #FFFFFF;
  --bg-sunken:        var(--gray-100);
  --bg-inverse:       var(--ink-900);

  --surface-card:     #FFFFFF;
  --surface-hover:    var(--gray-50);
  --surface-selected: var(--teal-50);

  --text-strong:      var(--gray-900);
  --text-body:        var(--gray-700);
  --text-muted:       var(--gray-500);
  --text-faint:       var(--gray-400);
  --text-brand:       var(--teal-700);
  --text-on-inverse:  var(--gray-50);

  --border-subtle:    var(--gray-200);
  --border-default:   var(--gray-300);
  --border-strong:    var(--gray-400);
  --border-brand:     var(--teal-400);

  --focus-ring:       var(--teal-400);

  --success:  var(--green-500);
  --warning:  var(--amber-500);
  --danger:   var(--red-500);
  --info:     var(--blue-500);
}
/* ============================================================
   NammaCare — Typography tokens
   Sora (display), Manrope (body/UI), Space Mono (clinical figures)
   ============================================================ */
:root {
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  /* Type scale (px) — editorial: large display, comfortable body */
  --fs-display-1: 84px;  /* hero, uppercase big-type moments */
  --fs-display-2: 60px;
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 17px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 11px;

  /* Weights */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Line heights */
  --lh-tight: 1.05; /* @kind font */
  --lh-snug: 1.2; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --ls-tighter: -0.03em; /* @kind font */
  --ls-tight: -0.015em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide: 0.04em; /* @kind font */
  --ls-wider: 0.14em; /* @kind font */

  /* Semantic text roles */
  --text-eyebrow-transform: uppercase; /* @kind other */
}
/* ============================================================
   NammaCare — Spacing & layout tokens (4px base grid)
   ============================================================ */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Container widths */
  --container-sm: 640px; /* @kind spacing */
  --container-md: 860px; /* @kind spacing */
  --container-lg: 1120px; /* @kind spacing */
  --container-xl: 1320px; /* @kind spacing */

  /* Component sizing */
  --control-h-sm: 32px; /* @kind spacing */
  --control-h-md: 40px; /* @kind spacing */
  --control-h-lg: 48px; /* @kind spacing */
  --tap-target: 44px;   /* @kind spacing */
}
/* ============================================================
   NammaCare — Effects: radii, shadows, motion
   Soft, rounded, calm. Teal-tinted shadows for depth.
   ============================================================ */
:root {
  /* Corner radii — generous & friendly for care contexts */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadows — cool teal-grey, low & diffuse */
  --shadow-xs: 0 1px 2px rgba(12, 20, 19, 0.06);
  --shadow-sm: 0 2px 6px rgba(12, 20, 19, 0.07), 0 1px 2px rgba(12, 20, 19, 0.05);
  --shadow-md: 0 8px 20px rgba(11, 84, 77, 0.09), 0 2px 6px rgba(12, 20, 19, 0.05);
  --shadow-lg: 0 18px 44px rgba(11, 84, 77, 0.13), 0 4px 12px rgba(12, 20, 19, 0.06);
  --shadow-brand: 0 10px 28px rgba(18, 165, 148, 0.30);

  /* Focus ring */
  --ring-width: 3px; /* @kind other */
  --ring: 0 0 0 var(--ring-width) rgba(47, 191, 178, 0.45); /* @kind shadow */

  /* Motion — GSAP-inspired: confident ease, gentle stagger feel */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}

@keyframes nc-spin { to { transform: rotate(360deg); } }
@keyframes nc-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nc-pop-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }