/* =========================================================================
   NerdBot — Design System Tokens
   Derived directly from the NerdBot app's current UI: cream canvas, bold
   Poppins display type, and chunky "3D" flat-shadow buttons/cards in vivid
   rose/violet/sky/amber/emerald. Every value the site uses lives here.
   ========================================================================= */

:root {
  /* ---- Color: brand (Tailwind rose, matches app's primary) ------------- */
  --color-primary:        #FB7185; /* rose-400 — app's primary face color */
  --color-primary-strong: #F43F5E; /* rose-500 — hover state */
  --color-primary-edge:   #E11D68; /* app's --btn-edge for primary: 3D lip */
  --color-primary-soft:   #FFE4E8; /* tinted fills, chips */
  --color-primary-wash:   #FFF1F3; /* faint section wash */

  /* ---- Color: accents (from the app's home-screen action cards) -------- */
  --color-accent-violet:       #8B5CF6; /* violet-500 */
  --color-accent-violet-edge:  #7C3AED;
  --color-accent-sky:          #38BDF8; /* sky-400 */
  --color-accent-sky-edge:     #0284C7;
  --color-accent-amber:        #FBBF24; /* amber-400 */
  --color-accent-amber-edge:   #D97706;
  --color-accent-amber-ink:    #451A03; /* amber-950 — text on amber face */

  /* ---- Color: neutrals ------------------------------------------------- */
  --color-bg:             #FFF7ED; /* app cream canvas */
  --color-bg-alt:         #FBF1E4; /* alternating section */
  --color-surface:        #FFFFFF; /* cards */
  --color-surface-sunken: #F7F2EA; /* inset panels inside cards */
  --color-border:         #ECE4D8; /* hairline on cream */
  --color-border-strong:  #E0D6C6;

  /* ---- Color: text ----------------------------------------------------- */
  --color-ink:            #18181B; /* zinc-900 — headings / primary text */
  --color-ink-soft:       #3F3F46; /* zinc-700 — strong body */
  --color-muted:          #71717A; /* zinc-500 — secondary text */
  --color-on-primary:     #FFFFFF; /* text on rose */

  /* ---- Color: status ----------------------------------------------------- */
  --color-success:        #10B981; /* emerald-500 */
  --color-success-edge:   #059669;
  --color-success-soft:   #D1FAE5;
  --color-warning:        #FBBF24; /* amber-400 */
  --color-warning-soft:   #FEF3C7;
  --color-error:          #F43F5E; /* rose-500 */
  --color-error-soft:     #FFE4E8;

  /* ---- Typography: families (matches app: Poppins display + Inter) ----- */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* ---- Typography: one type scale ------------------------------------- */
  /* size / line-height / weight / letter-spacing paired per role */
  --fs-display:    clamp(2.75rem, 5.5vw + 1rem, 4.75rem);
  --lh-display:    1.05;
  --ls-display:    -0.02em;
  --fw-display:    800;

  --fs-h1:         clamp(2.1rem, 3.25vw + 1rem, 3.25rem);
  --lh-h1:         1.08;
  --ls-h1:         -0.015em;
  --fw-h1:         800;

  --fs-h2:         clamp(1.65rem, 1.9vw + 0.75rem, 2.35rem);
  --lh-h2:         1.14;
  --ls-h2:         -0.01em;
  --fw-h2:         800;

  --fs-h3:         1.25rem;   /* 20px */
  --lh-h3:         1.3;
  --ls-h3:         -0.005em;
  --fw-h3:         700;

  --fs-body-lg:    1.1875rem;   /* 19px */
  --lh-body-lg:    1.6;
  --fw-body-lg:    400;

  --fs-body:       1.0625rem;   /* 17px */
  --lh-body:       1.65;
  --fw-body:       400;

  --fs-caption:    0.9375rem;   /* 15px */
  --lh-caption:    1.5;
  --fw-caption:    400;

  --fs-label:      0.8125rem;   /* 13px */
  --lh-label:      1.3;
  --ls-label:      0.06em;      /* uppercase eyebrows */
  --fw-label:      700;

  --fs-button:     1.0625rem;   /* 17px */
  --fw-button:     700;
  --ls-button:     -0.01em;

  /* ---- Spacing scale (use ONLY these) --------------------------------- */
  --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;
  --space-10: 128px;

  /* ---- Radius — chunky, matching the app's rounded-2xl/[28px]/[32px] --- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Shadows ----------------------------------------------------------
     App cards/buttons sit on a solid flat "lip" (no blur) that compresses
     on press — the --shadow-3d-* tokens are colored per surface and paired
     with .btn-3d / .card-3d, which read the matching --*-edge var. */
  --shadow-card:  0 1px 2px rgba(24, 24, 27, 0.04),
                  0 8px 24px rgba(24, 24, 27, 0.06);
  --shadow-hover: 0 2px 4px rgba(24, 24, 27, 0.05),
                  0 16px 40px rgba(24, 24, 27, 0.10);
  --shadow-modal: 0 24px 64px rgba(24, 24, 27, 0.18);
  --shadow-hero:  0 40px 80px -24px rgba(228, 30, 104, 0.35),
                  0 12px 32px rgba(24, 24, 27, 0.12);
  --shadow-inset: inset 0 0 0 1px var(--color-border);
  --shadow-3d-lift: 8px;   /* default flat-lip offset for chunky buttons/cards */

  /* ---- Motion ---------------------------------------------------------- */
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-slower: 640ms;
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);   /* decelerate */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */

  /* ---- Layout ---------------------------------------------------------- */
  --container: 1160px;
  --container-narrow: 760px;
  --nav-h: 68px;
}

@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;
  }
}