/*
 * Factory Base — the App Factory's modern, lovable default design language.
 *
 * The point of this file is that Factory output should look DESIGNED, not
 * generated: a coherent token system, a refined palette, real type and spacing
 * scales, depth, and motion — the things that separate a big-studio production
 * from a slop demo. A builder includes this file, uses the tokens + base
 * components, then themes ONE accent + the brand. The independent visual gate
 * (scripts/factory_visual_gate.py) scores the result against a studio rubric, so
 * this kit is the floor, not the ceiling — push past it per product.
 *
 * Usage:
 *   <link rel="stylesheet" href="factory-base.css">
 *   then override --accent / --accent-ink and the brand font in your own <style>.
 *
 * It is light- and dark-aware (prefers-color-scheme), responsive-first, and has
 * no dependencies.
 */

:root {
  /* ---- Brand accent (override these two per product) -------------------- */
  --accent: #5b5bd6;            /* primary brand colour */
  --accent-ink: #ffffff;        /* text/icon colour that sits ON the accent */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 40%, transparent);

  /* ---- Neutral palette (refined, slightly cool — never pure #000/#fff) -- */
  --bg: #f7f8fa;                /* app background */
  --surface: #ffffff;          /* cards / panels */
  --surface-2: #f1f3f7;        /* insets, subtle fills */
  --border: #e4e7ee;           /* hairline borders */
  --border-strong: #d3d8e2;
  --ink: #1a1d26;              /* primary text */
  --ink-2: #545b6b;            /* secondary text */
  --ink-3: #8a91a3;            /* muted / placeholder */

  /* ---- Semantic ---- */
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --ok-soft: color-mix(in srgb, var(--ok) 12%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);

  /* ---- Type scale (fluid, 1.2 minor-third-ish) ------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.18rem;
  --text-xl: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);
  --text-2xl: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem);
  --text-3xl: clamp(2.1rem, 1.5rem + 3vw, 3.4rem);
  --leading: 1.55;
  --tracking-tight: -0.02em;

  /* ---- Spacing scale (4px base) ---------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* ---- Radii ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px;

  /* ---- Elevation (soft, layered — not a single harsh drop shadow) ------ */
  --shadow-sm: 0 1px 2px rgba(20, 23, 38, 0.06),
               0 1px 3px rgba(20, 23, 38, 0.04);
  --shadow-md: 0 2px 6px rgba(20, 23, 38, 0.06),
               0 8px 24px rgba(20, 23, 38, 0.08);
  --shadow-lg: 0 8px 16px rgba(20, 23, 38, 0.08),
               0 24px 56px rgba(20, 23, 38, 0.14);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 180ms;

  --maxw: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1016;
    --surface: #171a22;
    --surface-2: #1f2330;
    --border: #272c3a;
    --border-strong: #343b4d;
    --ink: #eef1f7;
    --ink-2: #aab2c5;
    --ink-3: #6f7789;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5), 0 32px 64px rgba(0, 0, 0, 0.55);
  }
}

/* ---- Reset / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}
img, svg, video, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: var(--tracking-tight); font-weight: 700; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p { color: var(--ink-2); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* ---- Layout helpers ---------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s5); }
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; gap: var(--s3); align-items: center; }
.muted { color: var(--ink-3); }
.center { text-align: center; }

/* ---- Card -------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s5);
}
.card--raised { box-shadow: var(--shadow-md); }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  --_bg: var(--surface);
  --_fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: inherit; font-weight: 600; font-size: var(--text-sm);
  padding: 10px 18px; border-radius: var(--r-full);
  background: var(--_bg); color: var(--_fg);
  border: 1px solid var(--border-strong);
  cursor: pointer; user-select: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn--primary {
  --_bg: var(--accent); --_fg: var(--accent-ink);
  border-color: transparent; box-shadow: 0 1px 2px var(--accent-ring);
}
.btn--primary:hover { box-shadow: 0 6px 18px var(--accent-ring); }
.btn--ghost { --_bg: transparent; border-color: transparent; }
.btn--ghost:hover { --_bg: var(--surface-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- Inputs ------------------------------------------------------------ */
.input, .select, textarea.input {
  width: 100%; font: inherit; font-size: var(--text-base);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 11px 14px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }

/* ---- Badge / chip ------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent);
}
.badge--ok { background: var(--ok-soft); color: var(--ok); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }

/* ---- States: empty / loading / error (use these, don't ship blank) ----- */
.state { text-align: center; padding: var(--s7) var(--s5); color: var(--ink-2); }
.state__icon { font-size: 2.4rem; margin-bottom: var(--s3); opacity: 0.75; }
.skeleton {
  background: linear-gradient(100deg, var(--surface-2) 30%,
    color-mix(in srgb, var(--surface-2) 60%, var(--surface)) 50%, var(--surface-2) 70%);
  background-size: 200% 100%;
  animation: skeleton 1.3s var(--ease) infinite;
  border-radius: var(--r-md);
}
@keyframes skeleton { to { background-position: -200% 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fade-up 0.4s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}