/* ============================================================
   Luna Labs AI — shared design system
   "Bold Modern SaaS": electric lime on ink/paper, Clash Display + General Sans
   Loaded by landing.html and dashboard.html.
   ============================================================ */

:root {
  /* Brand */
  --lime:#C4F82A;
  --lime-600:#AEE000;
  --lime-700:#94c200;
  --lime-soft:#ECFBC2;

  /* Neutrals */
  --ink:#0E0F0C;
  --ink-2:#17190f;
  --ink-soft:#3a3c33;
  --paper:#FBFBF5;
  --paper-2:#F1F1E8;
  --card:#FFFFFF;
  --line:#E5E5D9;
  --muted:#76776d;

  /* State */
  --ok:#1f9d57; --ok-bg:#e7f7ec;
  --bad:#d23f3f; --bad-bg:#fbe9e9;
  --warn:#b5811a; --warn-bg:#fbf2dc;

  /* Geometry */
  --r-sm:10px; --r:14px; --r-lg:22px; --r-xl:30px;
  --shadow:0 1px 2px rgba(14,15,12,.05), 0 10px 30px rgba(14,15,12,.06);
  --shadow-lg:0 30px 80px rgba(14,15,12,.22);
  --ease:cubic-bezier(.2,.75,.2,1);

  --font-display:"Clash Display","General Sans",system-ui,sans-serif;
  --font-body:"General Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

* { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body {
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--paper); font-size:16px; line-height:1.55;
  overflow-x:hidden;
}
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:600; line-height:1.05; letter-spacing:-.02em; margin:0; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

::selection { background:var(--lime); color:var(--ink); }

/* Lime highlight marker used in headlines */
.hl { position:relative; white-space:nowrap; }
.hl::after {
  content:""; position:absolute; left:-.06em; right:-.06em; bottom:.05em; height:.28em;
  background:var(--lime); z-index:-1; border-radius:3px; transform:skewX(-3deg);
}

/* ---------------- Buttons ---------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:12px 20px; border-radius:var(--r-sm); border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s var(--ease), background .15s, box-shadow .15s, border-color .15s;
  background:var(--paper-2); color:var(--ink); line-height:1; white-space:nowrap;
}
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn.primary { background:var(--lime); color:var(--ink); box-shadow:0 8px 22px rgba(196,248,42,.45); }
.btn.primary:hover { background:var(--lime-600); }
.btn.dark { background:var(--ink); color:#fff; }
.btn.dark:hover { background:var(--ink-2); }
.btn.ghost { background:transparent; border-color:var(--ink); }
.btn.ghost:hover { background:var(--ink); color:#fff; }
.btn.btn-xl { font-size:18px; padding:17px 34px; border-radius:var(--r-md, 14px); }
.btn.ghost-light { background:transparent; border-color:rgba(255,255,255,.3); color:#fff; }
.btn.ghost-light:hover { background:rgba(255,255,255,.1); }
.btn.block { width:100%; }
.btn.sm { padding:8px 14px; font-size:14px; }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---------------- Pills / chips ---------------- */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:5px 12px; border-radius:99px; background:var(--paper-2); color:var(--ink-soft); }
.pill.ok { background:var(--ok-bg); color:var(--ok); }
.pill.bad { background:var(--bad-bg); color:var(--bad); }
.chip { font-size:11.5px; font-weight:600; background:var(--ink); color:var(--lime);
  padding:4px 10px; border-radius:7px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

.hidden { display:none !important; }

/* Grain/texture helper for dark sections */
.grain::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }