/* =====================================================================
   Nectar Design System — colors, type, tokens
   Dark theme — GitHub-dark inspired (per attached theme.css).
   Brand mark: gradient green hexagon with door/portal cutout.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Brand core (logo gradient — unchanged) ---------- */
  --nectar-green-start: #00FE7C;
  --nectar-green-end:   #CFFB40;
  --nectar-gradient:    linear-gradient(180deg, #00FE7C 0%, #CFFB40 100%);
  --nectar-gradient-45: linear-gradient(135deg, #00FE7C 0%, #CFFB40 100%);

  /* ---------- Surface ramp (GitHub-dark) ---------- */
  --bg:   #0d1117;   /* page */
  --bg2:  #161b22;   /* cards, panels */
  --bg3:  #21262d;   /* elevated, hover, table stripe */
  --bg4:  #2d333b;   /* pressed, deeper rest */
  --bg-canvas:  var(--bg);
  --bg-subtle:  var(--bg2);
  --bg-muted:   var(--bg3);
  --bg-inverse: #ffffff;

  /* ---------- Borders ---------- */
  --border:   rgba(255,255,255,0.08);
  --border2:  rgba(255,255,255,0.15);
  --border-1: var(--border);
  --border-2: var(--border2);

  /* ---------- Foreground ---------- */
  --text:  #e6edf3;   /* primary */
  --text2: #8b949e;   /* secondary, body */
  --text3: #484f58;   /* muted, placeholder */
  --fg-1: var(--text);
  --fg-2: var(--text2);
  --fg-3: var(--text3);
  --fg-4: var(--text3);
  --fg-on-dark-1: var(--text);
  --fg-on-dark-2: var(--text2);
  --fg-on-dark-3: var(--text3);

  /* ---------- Semantic colors (saturated, GitHub-dark) ---------- */
  --green:     #3fb950;
  --green-bg:  rgba(63,185,80,0.12);
  --green-dim: #238636;
  --amber:     #d29922;
  --amber-bg:  rgba(210,153,34,0.12);
  --red:       #f85149;
  --red-bg:    rgba(248,81,73,0.12);
  --blue:      #58a6ff;
  --blue-bg:   rgba(88,166,255,0.12);
  --purple:    #a371f7;

  /* ---------- Action ramp (derived from --green) ----------
     Primary action uses --green (#3fb950); --green-dim is pressed/hover-down.
     Lighter steps for hover-up and tinted backgrounds. */
  --green-50:  rgba(63,185,80,0.08);
  --green-100: rgba(63,185,80,0.12);
  --green-200: rgba(63,185,80,0.20);
  --green-300: #56d364;
  --green-400: #4ac35a;   /* hover */
  --green-500: #3fb950;   /* primary */
  --green-600: #2ea043;
  --green-700: #238636;   /* pressed */
  --green-800: #1a6f2c;
  --green-900: #0f5323;
  --fg-accent: var(--green);
  --fg-accent-on-dark: var(--green-300);

  /* ---------- Status (mapped to GH-dark palette) ---------- */
  --status-ok-bg:        var(--green-bg);
  --status-ok-border:    rgba(63,185,80,0.35);
  --status-ok-fg:        var(--green-300);
  --status-warn-bg:      var(--amber-bg);
  --status-warn-border:  rgba(210,153,34,0.35);
  --status-warn-fg:      #e3b341;
  --status-error-bg:     var(--red-bg);
  --status-error-border: rgba(248,81,73,0.35);
  --status-error-fg:     #ff7b72;
  --status-info-bg:      var(--blue-bg);
  --status-info-border:  rgba(88,166,255,0.35);
  --status-info-fg:      #79c0ff;

  --ring: var(--green);

  /* ---------- Type ---------- */
  --font:        -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-sans:   "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:   "JetBrains Mono", "SF Mono", "Fira Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, monospace;
  --font-display: var(--font-sans);
  --mono:        var(--font-mono);

  /* GH-dark uses a smaller base — 13px. Scale ramps from there. */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;   /* product baseline */
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-4xl:  30px;
  --text-5xl:  40px;
  --text-6xl:  56px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --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;

  /* ---------- Radii (tighter, per attached) ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    6px;
  --radius-md: 6px;
  --radius-lg: 10px;   /* cards */
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ---------- Elevation (dark-tuned) ---------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: inset 0 1px 0 rgba(255,255,255,0.03), 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: inset 0 1px 0 rgba(255,255,255,0.03), 0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 24px rgba(0,0,0,0.55);
  --shadow-xl: 0 24px 48px -12px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 0 4px rgba(63,185,80,0.18);
  --shadow-ring-focus: 0 0 0 3px rgba(63,185,80,0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-instant: 80ms;
  --dur-fast: 150ms;
  --dur-med: 240ms;
  --dur-slow: 400ms;
}

/* =====================================================================
   Element resets
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--bg);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h1, h1.nectar {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text);
}
.h2, h2.nectar {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
  color: var(--text);
}
.h3, h3.nectar {
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--text);
}
.h4, h4.nectar {
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--text);
}
.p, p.nectar {
  font-size: var(--text-base);
  color: var(--text2);
  line-height: var(--leading-normal);
}
.label, .eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text2);
}
.code, code.nectar {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg3);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  color: var(--text);
  border: 1px solid var(--border);
}

.nectar-gradient-text {
  background: var(--nectar-gradient-45);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}