/* =========================================================================
   ClinicZeo — Design Tokens
   Brand: "Kelp" (deep clinical green-teal) + "Clay" (warm terracotta accent)
   Radius personality: SHARP / editorial-clinical (2–10px). Pills for chips only.
   Every component consumes these variables. No hardcoded hex outside this file.
   ========================================================================= */

:root {
  /* ---- Brand: Kelp ---------------------------------------------------- */
  --kelp-50:  #eef6f3;
  --kelp-100: #d8ebe4;
  --kelp-200: #b2d7ca;
  --kelp-300: #83bca9;
  --kelp-400: #559c86;
  --kelp-500: #2f7d68;
  --kelp-600: #1f6454;
  --kelp-700: #1a4f44;
  --kelp-800: #163f37;
  --kelp-900: #12332d;
  --kelp-950: #0a211d;

  /* ---- Accent: Clay ---------------------------------------------------- */
  --clay-100: #fbe6dc;
  --clay-200: #f6c8b2;
  --clay-300: #f0a582;
  --clay-400: #e5825a;
  --clay-500: #d0623a;
  --clay-600: #ae4c2a;
  --clay-700: #8a3b21;

  /* ---- Neutrals: warm ink (brand-tinted, never pure grey) --------------- */
  --ink-0:   #ffffff;
  --ink-25:  #fbfaf8;
  --ink-50:  #f6f4f1;
  --ink-100: #edeae5;
  --ink-200: #ded9d2;
  --ink-300: #c6c0b7;
  --ink-400: #a0988d;
  --ink-500: #6b625a;
  --ink-600: #5a534d;
  --ink-700: #423d38;
  --ink-800: #2c2926;
  --ink-900: #1b1917;
  --ink-950: #121110;

  /* ---- Semantic -------------------------------------------------------- */
  --ok:    #2f7d68;
  --ok-bg: #e3f1eb;
  --ok-text: #17453b;
  --warn:    #9a6a08;
  --warn-bg: #fbeed2;
  --warn-text: #6a4905;
  --err:    #a83226;
  --err-bg: #fae5e2;
  --err-text: #8b2a20;
  --info:    #2c6e8f;
  --info-bg: #e0eef4;
  --info-text: #21566e;
  --accent-text: var(--clay-700);

  /* ---- Surfaces / roles ------------------------------------------------ */
  --bg:            var(--ink-25);
  --bg-alt:        var(--ink-50);
  --bg-invert:     var(--kelp-950);
  --surface:       var(--ink-0);
  --surface-2:     var(--ink-50);
  --surface-sunk:  var(--ink-100);
  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --hairline:      color-mix(in srgb, var(--ink-900) 8%, transparent);

  --text:      var(--ink-900);
  --text-2:    var(--ink-600);
  --text-3:    var(--ink-500);
  --text-on-brand: #f2fbf7;

  --brand:        var(--kelp-600);
  --brand-hover:  var(--kelp-700);
  --brand-soft:   var(--kelp-50);
  --brand-border: var(--kelp-200);
  --accent:       var(--clay-500);
  --accent-soft:  var(--clay-100);

  /* ---- Type ------------------------------------------------------------ */
  --font-display: "Bricolage Grotesque", "Space Grotesk", Georgia, serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale ratio 1.25, fluid between 375px and 1440px */
  --t-display: clamp(2.75rem, 1.6rem + 4.9vw, 5rem);
  --t-h1:      clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  --t-h2:      clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);
  --t-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --t-h4:      1.0625rem;
  --t-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-body:    1rem;
  --t-sm:      0.9375rem;
  --t-caption: 0.8125rem;
  --t-micro:   0.6875rem;

  --lh-tight: 1.08;
  --lh-head:  1.18;
  --lh-body:  1.65;
  --tr-display: -0.035em;
  --tr-head:    -0.022em;
  --tr-eyebrow:  0.12em;

  /* ---- Space: 4px grid -------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  --shell: 1200px;
  --shell-wide: 1360px;
  --prose: 68ch;

  /* ---- Radius (sharp personality) --------------------------------------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;
  --r-pill: 999px;

  /* ---- Elevation: layered + subtle -------------------------------------- */
  --e-1: 0 1px 2px rgba(18, 51, 45, .06);
  --e-2: 0 1px 2px rgba(18, 51, 45, .06), 0 6px 16px -6px rgba(18, 51, 45, .10);
  --e-3: 0 1px 2px rgba(18, 51, 45, .05), 0 18px 40px -18px rgba(18, 51, 45, .22);
  --e-4: 0 2px 4px rgba(18, 51, 45, .06), 0 34px 70px -30px rgba(18, 51, 45, .32);

  /* ---- Motion ------------------------------------------------------------ */
  --dur-1: 150ms;
  --dur-2: 220ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- Dark: designed, not inverted. Surfaces lift, borders use alpha,
        brand desaturates so it stops vibrating against dark ink. ---------- */
:root[data-theme="dark"] {
  --bg:            #0e1614;
  --bg-alt:        #121e1b;
  --bg-invert:     #070d0c;
  --surface:       #16211e;
  --surface-2:     #1c2a26;
  --surface-sunk:  #101a18;
  --border:        rgba(197, 226, 216, .14);
  --border-strong: rgba(197, 226, 216, .26);
  --hairline:      rgba(197, 226, 216, .10);

  --text:   #eaf1ee;
  --text-2: #a9bcb5;
  --text-3: #849790;
  --text-on-brand: #06120f;

  --brand:        #6dbfa3;
  --brand-hover:  #8bd2b8;
  --brand-soft:   rgba(109, 191, 163, .12);
  --brand-border: rgba(109, 191, 163, .30);
  --accent:       #e58f66;
  --accent-soft:  rgba(229, 143, 102, .14);

  --ok:    #6dbfa3;  --ok-bg:   rgba(109, 191, 163, .14);  --ok-text: #8fd4bb;
  --warn:  #d9ab53;  --warn-bg: rgba(217, 171, 83, .14);   --warn-text: #e2be74;
  --err:   #e08579;  --err-bg:  rgba(224, 133, 121, .14);  --err-text: #eda294;
  --info:  #78b6d1;  --info-bg: rgba(120, 182, 209, .14);  --info-text: #93c8de;
  --accent-text: #e8a37f;

  --e-1: 0 1px 2px rgba(0,0,0,.5);
  --e-2: 0 1px 2px rgba(0,0,0,.5), 0 6px 16px -6px rgba(0,0,0,.6);
  --e-3: 0 1px 2px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.8);
  --e-4: 0 2px 4px rgba(0,0,0,.5), 0 34px 70px -30px rgba(0,0,0,.9);
}