/* ==========================================================================
   MAANG.io — Editorial Premium · Design Tokens
   The single source of truth for color, type, space, radius, shadow, motion.
   Light is the primary theme; dark is provided as an opt-in ([data-theme="dark"]).
   Load a font stack first (see the @import note at the bottom or use <link>).
   ========================================================================== */

:root {
  /* ---- Brand / accent ------------------------------------------------- */
  --brand:        #0f766e;   /* deep teal — primary actions, links, focus */
  --brand-strong: #115e59;   /* hover / pressed */
  --brand-soft:   #d7ede9;   /* tints, quiet fills */
  --accent:       #b45309;   /* ochre — sparing editorial highlight (eyebrows, marks) */
  --grad:         linear-gradient(135deg, #0f766e 0%, #0d9488 100%); /* primary button / rare emphasis */

  /* ---- Surfaces (light) ----------------------------------------------- */
  --bg:           #faf8f4;   /* warm paper canvas */
  --bg-elev:      #fffdf9;   /* raised panels */
  --surface:      #fffdf9;   /* cards */
  --surface-2:    #f3efe7;   /* insets, code blocks, hover */
  --border:       #e7e1d4;   /* hairline */
  --border-strong:#d8d0bf;   /* emphasized hairline */

  /* ---- Ink (text) ----------------------------------------------------- */
  --text:         #1a1712;   /* near-black ink */
  --text-muted:   #5e574a;   /* secondary copy */
  --text-faint:   #8c8475;   /* meta, captions, eyebrows */
  --text-on-brand:#fffdf9;   /* text on brand fills */

  /* ---- Semantic ------------------------------------------------------- */
  --good: #15803d;
  --warn: #b45309;
  --danger: #b91c1c;

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;  /* headings */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(2.8rem, 6vw, 4.6rem); /* hero h1 */
  --fs-h1:      clamp(2.2rem, 4.2vw, 3.2rem);
  --fs-h2:      clamp(1.7rem, 3vw, 2.4rem);
  --fs-h3:      1.25rem;
  --fs-lead:    1.18rem;
  --fs-body:    1.0rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.78rem;

  --lh-tight: 1.12;          /* display/headings */
  --lh-body:  1.65;          /* long-form reading */
  --tracking-display: -0.025em;

  /* ---- Spacing scale (4px base) --------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section-y: clamp(64px, 9vw, 120px);
  --maxw: 1120px;            /* marketing width */
  --maxw-prose: 720px;       /* long-form reading measure */

  /* ---- Radius / shadow (editorial = soft, flat, hairline) ------------- */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(26,23,18,.05);
  --shadow-2: 0 12px 32px -18px rgba(26,23,18,.18);
  --shadow-3: 0 28px 64px -28px rgba(26,23,18,.22);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent); /* focus ring */

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: .15s; --t: .25s; --t-slow: .5s;
}

/* ---- Dark theme (opt-in) -------------------------------------------------
   A warm, low-glare dark — keep brand bright enough for contrast on ink. */
[data-theme="dark"] {
  --brand:        #5eead4;
  --brand-strong: #2dd4bf;
  --brand-soft:   #133b37;
  --accent:       #fbbf24;
  --grad:         linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%);

  --bg:           #16140f;
  --bg-elev:      #1d1a14;
  --surface:      #1d1a14;
  --surface-2:    #252118;
  --border:       #332e23;
  --border-strong:#473f2f;

  --text:         #f4efe6;
  --text-muted:   #b4ab98;
  --text-faint:   #857c69;
  --text-on-brand:#16140f;

  --good: #4ade80; --warn: #fbbf24; --danger: #fb7185;
  --shadow-2: 0 12px 32px -18px rgba(0,0,0,.6);
  --shadow-3: 0 28px 64px -28px rgba(0,0,0,.7);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t: 0s; --t-slow: 0s; }
}

/* Fonts: prefer a <link> in <head> for performance, e.g.
   https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap
   (kept out of CSS so it doesn't block render). */