/* ============================================================
   ENTERNO.IO BETA — DESIGN SYSTEM
   Inspired by: Vercel, Linear, Resend, Railway
   Color system: Zinc (neutral) + Emerald (accent)
   ============================================================ */

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

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Background scale */
  --bg-base:     #09090b; /* zinc-950 — page bg */
  --bg-raised:   #111113; /* between base and surface */
  --bg-surface:  #18181b; /* zinc-900 — card bg */
  --bg-elevated: #1f1f23; /* zinc-850 — modal, popover */
  --bg-overlay:  #27272a; /* zinc-800 — hover states */

  /* Border */
  --border:       rgba(255,255,255,0.07);
  --border-light: rgba(255,255,255,0.12);
  --border-focus: rgba(16,185,129,0.5);

  /* Text */
  --text-primary:   #fafafa; /* zinc-50 */
  --text-secondary: #a1a1aa; /* zinc-400 */
  --text-muted:     #71717a; /* zinc-500 */
  --text-disabled:  #52525b; /* zinc-600 */

  /* Accent — Emerald */
  --accent:        #10b981; /* emerald-500 */
  --accent-light:  #34d399; /* emerald-400 */
  --accent-dark:   #059669; /* emerald-600 */
  --accent-glow:   rgba(16,185,129,0.15);
  --accent-glow-sm: rgba(16,185,129,0.08);
  --accent-dim:    rgba(16,185,129,0.1);

  /* Semantic */
  --success: #22c55e;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #3b82f6;

  /* Status badge BGs */
  --status-success-bg: rgba(34,197,94,0.1);
  --status-success-border: rgba(34,197,94,0.25);
  --status-warning-bg: rgba(245,158,11,0.1);
  --status-warning-border: rgba(245,158,11,0.25);
  --status-danger-bg:  rgba(239,68,68,0.1);
  --status-danger-border: rgba(239,68,68,0.25);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */
  --text-7xl:  4.5rem;    /* 72px */

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* Letter spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* Font weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* Spacing scale (4px base) */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Border radius */
  --radius-sm: 0.375rem;  /* 6px */
  --radius:    0.5rem;    /* 8px */
  --radius-md: 0.625rem;  /* 10px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl:1.25rem;   /* 20px */
  --radius-full:9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow:    0 2px 8px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4);
  --shadow-accent: 0 0 20px rgba(16,185,129,0.2), 0 0 40px rgba(16,185,129,0.08);
  --shadow-accent-sm: 0 0 10px rgba(16,185,129,0.15);

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition:        200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:   300ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1400px;

  /* Nav */
  --nav-height: 64px;

  /* Z-index */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-modal:   300;
  --z-toast:   400;
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--bg-overlay) var(--bg-base);
  scrollbar-width: thin;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--bg-overlay); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-disabled); }

::selection { background: var(--accent-dim); color: var(--accent-light); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }
input, textarea, select { font-family: inherit; }

/* ── TYPOGRAPHY UTILITIES ───────────────────────────────── */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }
.text-6xl  { font-size: var(--text-6xl); }
.text-7xl  { font-size: var(--text-7xl); }

.font-light    { font-weight: var(--weight-light); }
.font-regular  { font-weight: var(--weight-regular); }
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }
.font-extrabold{ font-weight: var(--weight-extrabold); }

.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.leading-tight    { line-height: var(--leading-tight); }
.leading-snug     { line-height: var(--leading-snug); }

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-accent    { color: var(--accent); }
.text-accent-light { color: var(--accent-light); }

.font-mono { font-family: var(--font-mono); }

/* Gradient text */
.text-gradient {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 50%, #06b6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── LAYOUT UTILITIES ───────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container-sm  { max-width: var(--container-sm); }
.container-md  { max-width: var(--container-md); }
.container-lg  { max-width: var(--container-lg); }
.container-2xl { max-width: var(--container-2xl); }

.section { padding: var(--space-24) 0; }
.section-sm { padding: var(--space-16) 0; }
.section-lg { padding: var(--space-32) 0; }

.flex   { display: flex; }
.grid   { display: grid; }
.hidden { display: none; }

.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center{ justify-content: center; }
.justify-between{justify-content: space-between; }
.justify-end   { justify-content: flex-end; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

.w-full  { width: 100%; }
.h-full  { height: 100%; }
.mx-auto { margin: 0 auto; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

.overflow-hidden { overflow: hidden; }
.pointer-events-none { pointer-events: none; }
.select-none { user-select: none; }

/* ── DIVIDER ────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 0;
}

/* ── BADGE ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  line-height: 1.5;
  white-space: nowrap;
}
.badge-outline {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}
.badge-accent {
  background: var(--accent-dim);
  border: 1px solid rgba(16,185,129,0.25);
  color: var(--accent-light);
}
.badge-accent .badge-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: badge-pulse 2s ease-in-out infinite;
}
.badge-success {
  background: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  color: #4ade80;
}
.badge-warning {
  background: var(--status-warning-bg);
  border: 1px solid var(--status-warning-border);
  color: #fbbf24;
}
.badge-danger {
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger-border);
  color: #f87171;
}
.badge-new {
  background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(6,182,212,0.15));
  border: 1px solid rgba(16,185,129,0.3);
  color: var(--accent-light);
}

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes badge-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-6px); }
}
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-fade-in    { animation: fade-in    0.4s ease-out forwards; }
.animate-fade-in-up { animation: fade-in-up 0.5s ease-out forwards; }
.animate-float      { animation: float 4s ease-in-out infinite; }

/* ── NOISE TEXTURE ──────────────────────────────────────── */
.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  border-radius: inherit;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --container-xl: 100%; }
  .container { padding: 0 var(--space-5); }
}
@media (max-width: 768px) {
  :root {
    --text-5xl: 2.25rem;
    --text-6xl: 2.75rem;
    --text-7xl: 3.25rem;
  }
  .container { padding: 0 var(--space-4); }
  .section    { padding: var(--space-16) 0; }
  .section-lg { padding: var(--space-20) 0; }
  .md\:hidden { display: none !important; }
}
@media (max-width: 480px) {
  .sm\:hidden { display: none !important; }
  .container  { padding: 0 var(--space-4); }
}

/* ── FADE-IN ON SCROLL ──────────────────────────────────── */
.js-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.js-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── SECTION FOOTER (centered CTA link row) ─────────────── */
.section-footer {
  text-align: center;
  margin-top: var(--space-12);
}