/* =============================================================================
   NutraTech Design Tokens
   Clinical web app for Registered Dietitians in skilled-nursing facilities.
   -----------------------------------------------------------------------------
   Single source of truth. Vanilla CSS custom properties — zero dependencies.
   Brand: deep clinical teal (#0f3d3e). Severity scale never relies on color
   alone; every severity token is paired with an icon + label in components.css.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     1. BRAND — teal ramp derived from #0f3d3e
     --------------------------------------------------------------------------- */
  --teal-900: #0a2c2d; /* darkest — sidebar, deep surfaces */
  --teal-800: #0f3d3e; /* BRAND CORE */
  --teal-700: #15514f;
  --teal-600: #1d6a66;
  --teal-500: #2a8782; /* interactive teal, links on light */
  --teal-400: #4aa39d;
  --teal-300: #84c4bf;
  --teal-200: #bce0dd;
  --teal-100: #e2f1ef;
  --teal-050: #f1f8f7; /* tinted surface wash */

  /* ---------------------------------------------------------------------------
     2. NEUTRALS — cool clinical gray (slightly teal-biased)
     --------------------------------------------------------------------------- */
  --ink-900: #11201f; /* primary text */
  --ink-800: #1f3331;
  --ink-700: #34474a;
  --ink-600: #4a5d61; /* secondary text */
  --ink-500: #677a7e; /* muted / meta */
  --ink-400: #8a9a9d;
  --ink-300: #b7c3c4;
  --ink-200: #d6dedf; /* borders */
  --ink-150: #e3eaea;
  --ink-100: #eef2f2; /* hairlines, zebra */
  --ink-050: #f6f8f8; /* app canvas */
  --white:   #ffffff;

  /* ---------------------------------------------------------------------------
     3. SEVERITY — clinical scale. ALWAYS paired with icon + text.
        high = red, moderate = amber, low = blue/slate, ok = green
     --------------------------------------------------------------------------- */
  --sev-high-700:  #8f1d1d;
  --sev-high-600:  #b42318; /* core high */
  --sev-high-500:  #d6422b;
  --sev-high-100:  #fbe7e3;
  --sev-high-050:  #fdf3f1;

  --sev-mod-700:   #9a5b00;
  --sev-mod-600:   #b9740b; /* core moderate */
  --sev-mod-500:   #d68f1e;
  --sev-mod-100:   #fbeed3;
  --sev-mod-050:   #fdf7ec;

  --sev-low-700:   #1a4d8f;
  --sev-low-600:   #2563ac; /* core low / informational */
  --sev-low-500:   #3f82cf;
  --sev-low-100:   #e2edf9;
  --sev-low-050:   #f1f6fc;

  --sev-ok-700:    #1d6b3f;
  --sev-ok-600:    #167a45; /* core ok / stable / improving */
  --sev-ok-500:    #2f9d63;
  --sev-ok-100:    #dcf2e6;
  --sev-ok-050:    #eef9f2;

  /* Trend directional accents */
  --trend-up:   var(--sev-ok-600);   /* improving */
  --trend-down: var(--sev-high-600); /* worsening */
  --trend-flat: var(--ink-500);

  /* ---------------------------------------------------------------------------
     4. SEMANTIC SURFACES
     --------------------------------------------------------------------------- */
  --bg-canvas:      var(--ink-050);
  --bg-surface:     var(--white);
  --bg-surface-alt: var(--teal-050);
  --bg-raised:      var(--white);
  --bg-sidebar:     var(--teal-900);
  --bg-sidebar-hi:  var(--teal-800);
  --bg-inset:       var(--ink-050);

  --border:         var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-soft:    var(--ink-100);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-500);
  --text-on-teal:   #eaf4f2;
  --text-on-teal-mut: #a8c9c5;

  --link:           var(--teal-600);
  --focus-ring:     #2a8782;

  /* ---------------------------------------------------------------------------
     5. TYPE
        UI: Public Sans (legible, government/clinical grade)
        Document/note: Source Serif 4 (reads like a real chart note)
        Data/IDs: IBM Plex Mono (tabular)
     --------------------------------------------------------------------------- */
  --font-ui:   "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-doc:  "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — body min 14px; 12px reserved for tracked uppercase labels */
  --text-2xs: 0.75rem;   /* 12px — micro labels only */
  --text-xs:  0.8125rem; /* 13px */
  --text-sm:  0.875rem;  /* 14px — base body */
  --text-md:  0.9375rem; /* 15px */
  --text-lg:  1.0625rem; /* 17px */
  --text-xl:  1.375rem;  /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */
  --text-4xl: 3rem;      /* 48px — KPI hero numbers */

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65; /* note body */

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

  --tracking-label: 0.06em;
  --tracking-tight: -0.01em;

  /* ---------------------------------------------------------------------------
     6. SPACING — 4px base
     --------------------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */

  /* ---------------------------------------------------------------------------
     7. RADIUS
     --------------------------------------------------------------------------- */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     8. ELEVATION — soft, clinical, low-contrast
     --------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(17, 32, 31, 0.06);
  --shadow-sm: 0 1px 2px rgba(17, 32, 31, 0.06), 0 1px 3px rgba(17, 32, 31, 0.08);
  --shadow-md: 0 2px 4px rgba(17, 32, 31, 0.05), 0 4px 12px rgba(17, 32, 31, 0.08);
  --shadow-lg: 0 8px 24px rgba(17, 32, 31, 0.12), 0 2px 6px rgba(17, 32, 31, 0.06);
  --shadow-xl: 0 18px 48px rgba(17, 32, 31, 0.18);
  --ring-focus: 0 0 0 3px rgba(42, 135, 130, 0.35);

  /* ---------------------------------------------------------------------------
     9. LAYOUT
     --------------------------------------------------------------------------- */
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 60px;
  --content-max: 1320px;
  --rail-w: 332px;

  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}