/* ============================================================================
   Paragon Hub - Design Tokens (assets/tokens.css)
   ----------------------------------------------------------------------------
   Google Fonts link (include before tokens.css):
   https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;500;600;700&display=swap
   ========================================================================== */
:root {
  /* Forest ramp (6) */
  --forest-900: #122e20;
  --forest-700: #1b4332;
  --forest-600: #2c7a3f;
  --forest-400: #4a945d;
  --forest-200: #8fd694;
  --forest-100: #e6f0e4;

  /* Gold ramp (4) */
  --gold-700: #7a5400;
  --gold-500: #c9a44c;
  --gold-300: #e0b85a;
  --gold-100: #fff3d6;

  /* Warm ink ramp (6) */
  --ink-900: #17170f;
  --ink-700: #49463e;
  --ink-500: #6e6a61;
  --ink-300: #9c988d;
  --ink-200: #b5c2ae;
  --ink-100: #e3dccb;

  /* Surfaces (4) */
  --surface-0: #f7f3e6;
  --surface-1: #fffdf7;
  --surface-2: #f0e9d6;
  --white: #ffffff;

  /* WhatsApp & semantic (5) */
  --wa-500: #25d366;
  --wa-700: #1eb257;
  --wa-ink: #05301a;
  --danger-600: #c0392b;
  --danger-100: #fdecea;

  /* Font families (2) */
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Font weights (4) */
  --w-regular: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;

  /* Type scale (8) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.35rem, 2.2vw, 1.65rem);
  --text-2xl: clamp(1.65rem, 3vw, 2.25rem);
  --text-3xl: clamp(2rem, 4.2vw, 3.1rem);

  /* Reading measure */
  --measure: 65ch;

  /* Radius scale (4) */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-full: 999px;

  /* Spacing scale - 4px grid (12) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Warm shadows */
  --shadow: 0 1px 2px rgba(23, 23, 15, .06), 0 10px 24px -12px rgba(23, 23, 15, .14);
  --shadow-lg: 0 24px 48px -18px rgba(23, 23, 15, .24), 0 8px 20px -10px rgba(23, 23, 15, .14);
}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  font-weight:var(--w-regular);
  color:var(--ink-700);
  background:var(--surface-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit}


/* Shared accessible keyboard focus styles */
:focus-visible {
  outline: 2px solid var(--forest-600);
  outline-offset: 2px;
}
.btn:focus-visible,
.livetab:focus-visible,
.burger:focus-visible,
.top nav a:focus-visible,
summary:focus-visible,
.lbox__close:focus-visible,
.chip:focus-visible,
.tcard__act:focus-visible {
  outline: 2px solid var(--forest-600);
  outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--forest-600);
  outline-offset: 0;
  border-color: var(--forest-600);
}
.dark :focus-visible,
footer :focus-visible {
  outline-color: var(--gold-300);
}