/* ============================================================
   MEDESSENCE Design System — Tokens & Semantic Styles
   ============================================================
   Inspired by Mintlify. White-first, paper-clean, single accent.
   Inter for human text · Geist Mono for technical labels.
   ============================================================ */

/* --- Webfonts (CDN; self-host for production) ---------------- */
@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@500;600&display=swap');

:root {
  /* === COLOR — Primary ====================================== */
  --color-fg:                  #0d0d0d;   /* near-black, primary text & dark fills */
  --color-bg:                  #ffffff;   /* pure white, page & card surface       */
  --color-brand:               #18E299;   /* signature green — sparingly!          */

  /* === COLOR — Brand variants =============================== */
  --color-brand-light:         #d4fae8;   /* tinted surface for badges & hovers    */
  --color-brand-deep:          #0fa76e;   /* text on tinted-green badges           */

  /* === COLOR — Semantic (warn / info / error) ============== */
  --color-warn:                #c37d0d;
  --color-warn-bg:             #fff4e0;
  --color-info:                #3772cf;
  --color-info-bg:             #e6efff;
  --color-error:               #d45656;
  --color-error-bg:            #fde8e8;

  /* === COLOR — Neutral scale ================================ */
  --gray-900:                  #0d0d0d;   /* same as fg                            */
  --gray-700:                  #333333;   /* secondary text, body                  */
  --gray-500:                  #666666;   /* tertiary, muted labels                */
  --gray-400:                  #888888;   /* placeholder, disabled                 */
  --gray-200:                  #e5e5e5;   /* borders, dividers                     */
  --gray-100:                  #f5f5f5;   /* subtle surface tint                   */
  --gray-50:                   #fafafa;   /* near-white tint                       */

  /* === COLOR — Foreground roles ============================= */
  --fg-1:                      var(--gray-900);  /* headings, primary text     */
  --fg-2:                      var(--gray-700);  /* body, secondary            */
  --fg-3:                      var(--gray-500);  /* muted, captions            */
  --fg-4:                      var(--gray-400);  /* placeholder, disabled      */

  /* === COLOR — Surface roles ================================ */
  --surface-1:                 #ffffff;          /* page                       */
  --surface-2:                 var(--gray-50);   /* subtle alt                 */
  --surface-3:                 var(--gray-100);  /* hover, code blocks         */

  /* === COLOR — Borders ====================================== */
  --border-subtle:             rgba(0, 0, 0, 0.05);
  --border-medium:             rgba(0, 0, 0, 0.08);
  --border-strong:             rgba(0, 0, 0, 0.12);
  --border-focus:              var(--color-brand);

  /* === COLOR — Interactive ================================== */
  --link:                      var(--fg-1);
  --link-hover:                var(--color-brand);
  --focus-ring:                var(--color-brand);

  /* === SHADOW =============================================== */
  --shadow-card:               rgba(0, 0, 0, 0.03) 0px 2px 4px;
  --shadow-button:             rgba(0, 0, 0, 0.06) 0px 1px 2px;
  --shadow-overlay:            rgba(0, 0, 0, 0.08) 0px 8px 24px;

  /* === RADIUS =============================================== */
  --radius-xs:                 4px;       /* inline code, tiny tags            */
  --radius-sm:                 8px;       /* nav buttons, small containers     */
  --radius-md:                 16px;      /* standard cards                    */
  --radius-lg:                 24px;      /* featured cards                    */
  --radius-pill:               9999px;    /* buttons, inputs, badges           */

  /* === SPACING (8px base) =================================== */
  --space-0:                   0;
  --space-1:                   2px;
  --space-2:                   4px;
  --space-3:                   8px;
  --space-4:                   12px;
  --space-5:                   16px;
  --space-6:                   24px;
  --space-7:                   32px;
  --space-8:                   48px;
  --space-9:                   64px;
  --space-10:                  96px;

  /* === TYPOGRAPHY — Families ================================ */
  --font-sans:                 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --font-mono:                 'Geist Mono', 'Geist Mono Fallback', ui-monospace, SFMono-Regular, monospace;

  /* === TYPOGRAPHY — Token sizes ============================= */
  --type-display:              64px;
  --type-h1:                   40px;
  --type-h2:                   24px;
  --type-h3:                   20px;
  --type-body-lg:              18px;
  --type-body:                 16px;
  --type-button:               15px;
  --type-link:                 14px;
  --type-caption:              14px;
  --type-label:                13px;
  --type-mono:                 12px;
  --type-mono-micro:           10px;

  /* === MOTION =============================================== */
  --ease-out:                  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:             120ms;
  --duration-base:             180ms;
  --duration-slow:             280ms;

  /* === LAYOUT =============================================== */
  --container-max:             1200px;
  --gutter:                    24px;
  --gutter-lg:                 32px;
}

/* === DARK MODE ============================================== */
@media (prefers-color-scheme: dark) {
  :root.auto-dark, :root[data-theme="dark"] {
    --color-fg:                #ededed;
    --color-bg:                #0d0d0d;

    --gray-900:                #ededed;
    --gray-700:                #c4c4c4;
    --gray-500:                #a0a0a0;
    --gray-400:                #707070;
    --gray-200:                rgba(255, 255, 255, 0.08);
    --gray-100:                #1a1a1a;
    --gray-50:                 #141414;

    --fg-1:                    #ededed;
    --fg-2:                    #c4c4c4;
    --fg-3:                    #a0a0a0;
    --fg-4:                    #707070;

    --surface-1:               #0d0d0d;
    --surface-2:               #141414;
    --surface-3:               #1a1a1a;

    --border-subtle:           rgba(255, 255, 255, 0.06);
    --border-medium:           rgba(255, 255, 255, 0.10);
    --border-strong:           rgba(255, 255, 255, 0.16);

    --shadow-card:             rgba(0, 0, 0, 0.4) 0px 2px 4px;
    --shadow-button:           rgba(0, 0, 0, 0.5) 0px 1px 2px;
    --shadow-overlay:          rgba(0, 0, 0, 0.6) 0px 8px 24px;
  }
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Default base styles applied to common HTML elements.
   ============================================================ */

html, body {
  background: var(--color-bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

/* --- Headings --------------------------------------------- */
h1, .h1-display {
  font-family: var(--font-sans);
  font-size: var(--type-display);
  font-weight: 600;
  line-height: 1.10;
  letter-spacing: -1.28px;
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--type-h1);
  font-weight: 600;
  line-height: 1.10;
  letter-spacing: -0.8px;
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--type-h2);
  font-weight: 500;
  line-height: 1.30;
  letter-spacing: -0.24px;
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.30;
  letter-spacing: -0.2px;
  color: var(--fg-1);
  margin: 0;
}

/* --- Body --------------------------------------------- */
p, .p, .body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-2);
  margin: 0;
}

.body-lg {
  font-size: var(--type-body-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-3);
}

.caption {
  font-size: var(--type-caption);
  font-weight: 400;
  color: var(--fg-3);
  line-height: 1.5;
}

/* --- Labels --------------------------------------------- */
.label-uppercase {
  font-family: var(--font-sans);
  font-size: var(--type-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.65px;
  color: var(--fg-3);
}

/* --- Mono --------------------------------------------- */
code, .mono, .mono-code {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--fg-2);
}

.mono-badge {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.mono-micro {
  font-family: var(--font-mono);
  font-size: var(--type-mono-micro);
  font-weight: 500;
  text-transform: uppercase;
}

/* --- Links --------------------------------------------- */
a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}
a:hover { color: var(--link-hover); }
a:focus-visible {
  outline: 1px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --- Buttons --------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--type-button);
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  white-space: nowrap;
  user-select: none;
}

.btn-primary {
  background: var(--color-fg);
  color: var(--color-bg);
  padding: 10px 24px;
  box-shadow: var(--shadow-button);
}
.btn-primary:hover { opacity: 0.9; }
.btn-primary:active { opacity: 0.8; }

.btn-secondary {
  background: var(--color-bg);
  color: var(--color-fg);
  padding: 10px 20px;
  border: 1px solid var(--border-medium);
}
.btn-secondary:hover { border-color: var(--border-strong); }

.btn-ghost {
  background: transparent;
  color: var(--fg-1);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.btn-ghost:hover { background: var(--surface-3); }

.btn-brand {
  background: var(--color-brand);
  color: var(--color-fg);
  padding: 10px 24px;
}
.btn-brand:hover { filter: brightness(0.96); }

/* --- Inputs --------------------------------------------- */
.input {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  color: var(--fg-1);
  background: var(--color-bg);
  padding: 10px 16px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-pill);
  outline: none;
  transition: border-color var(--duration-base) var(--ease-out),
              outline-color var(--duration-base) var(--ease-out);
}
.input::placeholder { color: var(--fg-4); }
.input:focus {
  border-color: var(--border-focus);
  outline: 1px solid var(--border-focus);
}

/* --- Cards --------------------------------------------- */
.card {
  background: var(--color-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-base) var(--ease-out);
}
.card:hover { border-color: var(--border-medium); }

.card-featured {
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}

/* --- Badges / pills --------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-light);
  color: var(--color-brand-deep);
  border: 1px solid var(--border-subtle);
}
.badge-warn  { background: var(--color-warn-bg);  color: var(--color-warn); }
.badge-info  { background: var(--color-info-bg);  color: var(--color-info); }
.badge-error { background: var(--color-error-bg); color: var(--color-error); }

/* --- Hero gradient utility --------------------------------- */
.hero-gradient {
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(24, 226, 153, 0.18) 0%, rgba(24, 226, 153, 0.05) 40%, transparent 70%),
    radial-gradient(80% 100% at 50% 100%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%),
    var(--color-bg);
}

/* --- Container & layout helpers ---------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
@media (min-width: 768px) { .container { padding-inline: var(--gutter-lg); } }

.section { padding-block: var(--space-9); }
@media (max-width: 767px) { .section { padding-block: var(--space-8); } }