/* ==========================================================================
   tokens.css — Design tokens for the BoloDev network
   Single source of truth for color, type, spacing, radii, shadows, layout.
   Loaded FIRST. Per-site accent overrides live in each site's /site.css
   (loaded LAST) and only need to set --accent / --accent-2.
   ========================================================================== */

:root {
  /* --- Ink / text scale (slate) ------------------------------------------ */
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;

  /* --- Lines & surfaces --------------------------------------------------- */
  --line:      #e2e8f0;
  --line-2:    #cbd5e1;
  --surface:   #f8fafc;
  --surface-2: #f1f5f9;
  --white:     #ffffff;

  /* --- Brand (blue) ------------------------------------------------------- */
  --brand-700: #1d4ed8;
  --brand-600: #2563eb;
  --brand-500: #3b82f6;
  --brand-400: #60a5fa;

  /* --- Secondary accents (per-site palettes pull from these) -------------- */
  --violet-600:  #7c3aed;
  --violet-500:  #8b5cf6;
  --emerald-600: #059669;
  --emerald-500: #10b981;
  --emerald-400: #34d399;
  --sky-500:     #0ea5e9;

  /* --- Functional / status ----------------------------------------------- */
  --wa-green:      #25d366; /* WhatsApp brand green */
  --wa-green-700:  #15803d;
  --success:       var(--emerald-600);
  --danger:        #dc2626;

  /* --- Accent hooks (OVERRIDE per site in /site.css) ---------------------- *
   * bolodev            -> blue + violet
   * freelancerbologna  -> blue + emerald
   * programmatoribologna -> blue + sky
   * ----------------------------------------------------------------------- */
  --accent:   var(--brand-600);
  --accent-2: var(--violet-500);

  /* Tint of the accent, recomputed from the hook so site overrides cascade. */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--white));
  --accent-line: color-mix(in srgb, var(--accent) 28%, var(--line));

  /* --- Dark-section variables --------------------------------------------- *
   * Used inside .section--dark / .hero--dark / .site-footer. Components read
   * these so a single class flips a region to the dark theme.
   * ----------------------------------------------------------------------- */
  --dark-bg:       #0b1220; /* near-ink, slightly bluer than --ink-900 */
  --dark-bg-2:     #0f172a;
  --dark-surface:  #131c2e;
  --dark-line:     #1e293b;
  --dark-ink:      #e2e8f0;
  --dark-ink-soft: #94a3b8;

  /* --- Typography --------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
               Consolas, "Liberation Mono", monospace;

  /* Fluid type scale (clamp: min, preferred-vw, max) ---------------------- */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.1875rem;
  --fs-lg:   1.5rem;
  --fs-xl:   2rem;
  --fs-2xl:  2.5rem;
  --fs-3xl:  3.25rem;

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-base:  1.65;

  --tracking-tight: 0;
  --tracking-wide:  0;

  /* --- Spacing scale (4px base) ------------------------------------------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* Fluid vertical rhythm for big section padding ------------------------- */
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  /* --- Radii -------------------------------------------------------------- */
  --r-sm:   8px;
  --r:      8px;
  --r-lg:   8px;
  --r-pill: 999px;

  /* --- Shadows (soft, modern) -------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06),
               0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow:    0 4px 12px rgba(15, 23, 42, 0.08),
               0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12),
               0 6px 14px rgba(15, 23, 42, 0.06);
  --shadow-accent: 0 10px 30px color-mix(in srgb, var(--accent) 28%, transparent);

  /* --- Layout ------------------------------------------------------------- */
  --container:   1120px;
  --container-narrow: 760px;
  --gutter:      clamp(1rem, 0.6rem + 2vw, 2rem);
  --header-h:    64px;

  /* --- Motion ------------------------------------------------------------- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    140ms;
  --t:         220ms;
  --t-slow:    360ms;

  /* --- Z-index ------------------------------------------------------------ */
  --z-header: 100;
  --z-menu:   200;

  color-scheme: light;
}