/* Medisi — Fonts. Real brand families served from Google Fonts.
   Nunito Sans (display + body), Manrope (UI), Chakra Petch (eyebrows/labels), Inter (fallback UI). */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900&family=Manrope:wght@400;500;600;700;800&family=Chakra+Petch:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* Medisi — Color tokens
   Derived from the Medisi Figma. Green-dominant brand:
   deep green #0C4A3D (primary surface) + signature bright green #00DF81 (accent). */
:root {
  /* ---- Brand green (deep) — the dominant Medisi color ---- */
  --brand-25:  #F3FBF7;
  --brand-50:  #E7F5EE;
  --brand-100: #C7E9D8;
  --brand-200: #ABEFC6; /* fig stroke */
  --brand-300: #82BD94; /* fig muted */
  --brand-400: #3E9E7C;
  --brand-500: #227065; /* fig teal */
  --brand-600: #185A50;
  --brand-700: #0F4E41;
  --brand-800: #0C4A3D; /* fig PRIMARY deep green */
  --brand-900: #08352C;
  --brand-950: #052019;

  /* ---- Accent green (signature bright) ---- */
  --accent-25:  #ECFFF6;
  --accent-50:  #EAFFEC; /* fig light */
  --accent-100: #D4FAD7; /* fig light */
  --accent-200: #A7F3C9;
  --accent-300: #6EEDAB;
  --accent-400: #22E68C;
  --accent-500: #00DF81; /* fig SIGNATURE bright green */
  --accent-600: #00B368;
  --accent-700: #008A50;
  --accent-800: #036B41;
  --accent-900: #064E31;

  /* ---- Amber (complementary warm accent, from fig #FF9900) ---- */
  --amber-50:  #FFF7EB;
  --amber-100: #FEECC7;
  --amber-300: #FDC65A;
  --amber-400: #FFAD26;
  --amber-500: #FF9900; /* fig */
  --amber-600: #DB7A00;
  --amber-700: #B45A05;

  /* ---- Gray (Untitled UI neutral) ---- */
  --gray-25:  #FCFCFD;
  --gray-50:  #F9FAFB;
  --gray-100: #F2F4F7;
  --gray-200: #EAECF0;
  --gray-300: #D0D5DD;
  --gray-400: #98A2B3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1D2939;
  --gray-900: #101828;
  --gray-950: #0C111D;

  /* ink from fig text usage */
  --ink-900: #252B36; /* fig primary text */
  --ink-700: #484848; /* fig secondary text */

  /* ---- Semantic ---- */
  --success-50:  #ECFDF3;
  --success-100: #DCFAE6;
  --success-500: #17B26A;
  --success-600: #079455;
  --success-700: #067647;

  --warning-50:  #FFFAEB;
  --warning-500: #F79009;
  --warning-600: #DC6803;
  --warning-700: #B54708;

  --error-50:  #FEF3F2;
  --error-100: #FEE4E2;
  --error-500: #F04438;
  --error-600: #D92D20;
  --error-700: #B42318;

  --white: #FFFFFF;
  --black: #000000;

  /* ===== Semantic aliases ===== */
  --bg-canvas:      var(--white);
  --bg-subtle:      var(--gray-50);
  --bg-muted:       var(--gray-100);
  --bg-brand:       var(--brand-800);   /* deep-green sections */
  --bg-brand-soft:  var(--accent-50);   /* pale-green sections */
  --bg-inverse:     var(--brand-900);

  --surface-card:       var(--white);
  --surface-card-brand: var(--brand-800);

  --text-primary:    var(--ink-900);
  --text-secondary:  var(--gray-600);
  --text-tertiary:   var(--gray-500);
  --text-placeholder:var(--gray-400);
  --text-on-brand:   var(--white);
  --text-on-brand-2: var(--accent-100);
  --text-brand:      var(--brand-800);
  --text-accent:     var(--accent-600);

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

  --focus-ring: color-mix(in oklab, var(--accent-500) 45%, transparent);

  /* link defaults */
  --link:        var(--brand-800);
  --link-hover:  var(--accent-600);
}

/* Medisi — Typography tokens
   Nunito Sans = display + body · Manrope = UI · Chakra Petch = eyebrow/label · Inter = fallback UI */
:root {
  --font-display: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-eyebrow: "Chakra Petch", "Nunito Sans", ui-monospace, monospace;

  /* Weights */
  --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 */

  /* Display scale (Untitled UI display sizes) */
  --text-display-2xl: 72px; --lh-display-2xl: 90px;
  --text-display-xl:  60px; --lh-display-xl:  72px;
  --text-display-lg:  48px; --lh-display-lg:  60px;
  --text-display-md:  36px; --lh-display-md:  44px;
  --text-display-sm:  30px; --lh-display-sm:  38px;
  --text-display-xs:  24px; --lh-display-xs:  32px;

  /* Text scale */
  --text-xl: 20px; --lh-xl: 30px;
  --text-lg: 18px; --lh-lg: 28px;  /* fig body — Nunito Sans 18 */
  --text-md: 16px; --lh-md: 24px;
  --text-sm: 14px; --lh-sm: 20px;
  --text-xs: 12px; --lh-xs: 18px;

  /* Tracking */
  --tracking-tight: -0.03em;   /* headings + wordmark (fig) */
  --tracking-snug: -0.02em;
  --tracking-eyebrow: 0.06em;  /* Chakra Petch uppercase */
}

/* Medisi — Spacing, radii, shadows */
:root {
  /* Spacing — 4px base (Untitled UI) */
  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --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;
  --space-32: 128px;

  /* container widths (fig hero uses 1280 content, 1440 frame) */
  --container: 1280px;
  --container-narrow: 768px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;    /* buttons */
  --radius-lg: 10px;
  --radius-xl: 12px;   /* inputs, small cards */
  --radius-2xl: 16px;  /* cards */
  --radius-3xl: 20px;
  --radius-4xl: 24px;  /* large feature cards */
  --radius-full: 9999px;

  /* Shadows (Untitled UI, rgba(16,24,40,*) from fig) */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.10), 0 1px 2px rgba(16,24,40,0.06);
  --shadow-md: 0 4px 8px -2px rgba(16,24,40,0.10), 0 2px 4px -2px rgba(16,24,40,0.06);
  --shadow-lg: 0 12px 16px -4px rgba(16,24,40,0.08), 0 4px 6px -2px rgba(16,24,40,0.03);
  --shadow-xl: 0 20px 24px -4px rgba(16,24,40,0.08), 0 8px 8px -4px rgba(16,24,40,0.03);
  --shadow-2xl: 0 24px 48px -12px rgba(16,24,40,0.18);
  --shadow-brand: 0 12px 32px -8px rgba(12,74,61,0.28);
  --shadow-accent: 0 8px 24px -6px rgba(0,223,129,0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}

/* Medisi — base element defaults. Kept minimal; consumers can rely on tokens. */
a { color: var(--link); text-decoration: none; transition: color var(--dur) var(--ease-out); }
a:hover { color: var(--link-hover); }