/* Novra design tokens — calm white AI-agency look: Manrope headlines, Inter body, warm grey panels,
   black pill buttons and one soft emerald → sky → lilac glow.
   Fonts (load before this file):
   <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── */
  --bg: #FFFFFF;          /* page */
  --surface: #F4F2EF;     /* warm grey panels (feature panels, mock trays) */
  --surface-2: #ECE9E5;   /* nested trays, hover on panels */
  --ink-bg: #0B0B0C;      /* dark bands, footer, black buttons */
  --ink-bg-2: #161617;    /* cards on dark */

  /* ── Text ── */
  --text: #0B0B0C;        /* headings */
  --text-2: #57534E;      /* body copy (7.3:1 on white) */
  --muted: #6D6962;       /* captions, labels (5.3:1 on white) */
  --on-dark: #FFFFFF;
  --on-dark-2: #B9B5AF;   /* body on dark (9:1 on #0B0B0C) */

  /* ── Lines ── */
  --line: #ECEAE7;        /* card borders, dividers */
  --line-2: #DEDBD7;      /* inputs, light buttons */
  --line-dark: rgba(255, 255, 255, .09);

  /* ── Brand / accent (brand slots — the palette engine replaces these per build) ── */
  --accent: #1FAE7A;      /* sparkle icons, dots, active states, fills */
  --accent-rgb: 31, 174, 122;
  --accent-ink: #0B7A53;  /* accent as TEXT (5.5:1 on white) */
  --accent-soft: #E6F6EF; /* tinted chips / selected rows */
  --accent-2: #38BDF8;    /* glow + data series 2 */
  --accent-3: #A78BFA;    /* glow + data series 3 */
  --on-accent: #062B1E;   /* text on an accent fill */
  --glow: radial-gradient(60% 120% at 0% 100%, rgba(var(--accent-rgb), .55), transparent 70%),
          radial-gradient(55% 120% at 50% 110%, color-mix(in srgb, var(--accent-2) 55%, transparent), transparent 70%),
          radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--accent-3) 55%, transparent), transparent 70%);

  /* ── Data / status (mockups only — never brand) ── */
  --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: #2563EB;

  /* ── Fonts ── */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii ── */
  --r-xs: 8px;    /* workflow nodes, small chips inside mocks */
  --r-sm: 12px;   /* icon boxes, inputs */
  --r: 20px;      /* cards */
  --r-lg: 28px;   /* panels, browser frame */
  --r-pill: 9999px;

  /* ── Spacing / layout ── */
  --container: 1272px;  /* content column (1600 frame − 2×164) */
  --gutter: 24px;
  --section: 140px;     /* rhythm between sections */
  --head-gap: 56px;     /* section head → content */
  --nav-h: 57px;

  /* ── Shadows ── */
  --shadow-1: 0 1px 2px rgba(11, 11, 12, .06), 0 2px 8px rgba(11, 11, 12, .04);
  --shadow-2: 0 24px 60px rgba(11, 11, 12, .10), 0 4px 14px rgba(11, 11, 12, .05);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .7s;
}

/* ── Type scale (Manrope for headings, Inter for everything else) ── */
.t-display { font: 500 64px/1.04 var(--font-display); letter-spacing: -0.045em; }
.t-h1 { font: 500 56px/1.08 var(--font-display); letter-spacing: -0.042em; }
.t-h2 { font: 500 40px/1.12 var(--font-display); letter-spacing: -0.035em; }
.t-h3 { font: 500 28px/1.25 var(--font-display); letter-spacing: -0.03em; }
.t-h4 { font: 500 20px/1.35 var(--font-display); letter-spacing: -0.02em; }
.t-lead { font: 400 18px/1.6 var(--font); letter-spacing: -0.02em; }
.t-body { font: 400 16px/1.6 var(--font); letter-spacing: -0.02em; }
.t-small { font: 400 14px/1.5 var(--font); letter-spacing: -0.02em; }
.t-label { font: 500 13px/1.5 var(--font); letter-spacing: 0.06em; text-transform: uppercase; }

@media (max-width: 900px) {
  .t-display { font-size: 48px; } .t-h1 { font-size: 42px; } .t-h2 { font-size: 32px; } .t-h3 { font-size: 24px; }
  :root { --section: 104px; --head-gap: 40px; }
}
@media (max-width: 560px) {
  .t-display { font-size: 38px; } .t-h1 { font-size: 36px; } .t-h2 { font-size: 28px; }
  :root { --section: 84px; --gutter: 16px; }
}

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.static *, .static *::before, .static *::after { animation: none !important; transition: none !important; }