/* AdNeed Platform (Site 1) — design tokens
   -------------------------------------------------------------------
   Deliberately its own file, separate from any page-specific CSS, so
   the homepage (Step 2), dashboard (Step 6), and every tool page after
   it all draw from the same palette/type/spacing scale instead of each
   one quietly reinventing "AdNeed's colors" slightly differently.

   Brand direction per brief: dark navy / near-black base, orange accent,
   white/light text, premium-but-approachable modern SaaS. These are
   deliberately NOT the generic-AI-page defaults (no warm cream +
   terracotta, no near-black + acid-green single accent, no identical-
   rounded-card-kit look) — see the plan note in the Step 2 handoff for
   the reasoning once that step lands.
   ------------------------------------------------------------------- */
:root {
  /* Surfaces — navy scale, not pure black, so panels can sit on top of
     the page background with a visible but subtle step rather than a
     stark black/white jump. */
  --ink-950: #070B12;   /* page background */
  --ink-900: #0D1420;   /* raised panels / header */
  --ink-800: #141D2E;   /* cards */
  --ink-700: #1E2B40;   /* borders, dividers */
  --ink-600: #34445E;   /* muted borders on hover */

  /* Text */
  --text-100: #F5F7FA;  /* primary text on dark */
  --text-300: #C3CBDA;  /* secondary text */
  --text-500: #7C8AA3;  /* tertiary / muted */

  /* Brand accent — a warm, slightly reddened orange rather than a pure
     saturated #FF8800, so it reads premium rather than a flat alert
     color; a second, deeper ember tone gives gradients somewhere to go
     without turning into decoration for its own sake. */
  --accent-400: #FFA24D;
  --accent-500: #F2762B;
  --accent-600: #D6511A;
  --accent-contrast: #1A0D04; /* text color when placed ON accent-500 */

  /* Status (used sparingly — plan/limit states, form validation) */
  --success: #3FBF7F;
  --warning: #E8B93F;
  --danger: #E5533D;

  /* Type — one display face for personality, one workhorse face for
     everything else; deliberately not a generic "Inter everywhere"
     choice given this is meant to feel like a considered brand, not a
     dashboard template. */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif;

  /* Type scale — a restrained set, reused rather than picking a new
     size per component. */
  --text-xs: 13px;
  --text-sm: 14.5px;
  --text-base: 16px;
  --text-lg: 19px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --text-4xl: 58px;

  /* Spacing — 4px base scale. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.35);
  --content-width: 1120px;
}

/* Reduced-motion respected globally — set once here rather than
   per-animation, so nothing later has to remember to add it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink-950);
  color: var(--text-100);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-100);
  margin: 0;
  line-height: 1.15;
}
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; }

/* Visible keyboard focus everywhere — set once, globally, rather than
   left to each component to remember. */
:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: 2px;
}

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.hidden { display: none !important; }