/* ============================================================
   TK BRAND - Canonical design tokens (single source of truth)
   ------------------------------------------------------------
   Promoted from tk-checkout/src/react/styles/tokens.css and made
   the brand-wide canon. Variables ONLY: no @font-face here, so this
   sheet is safe to load on every front-end view (including the
   commerce path) without triggering a single font download.

   Reconciles the four reds that drifted across plugins
   (#B91C1C, #c0392b, #D4431A, tk-menu #b8341a) onto one: --tk-red.
   Other plugins migrate to consume these later, one at a time.
   ============================================================ */
:root {
  /* Brand red */
  --tk-red: #B91C1C;
  --tk-red-hover: #991B1B;
  --tk-red-pressed: #7F1D1D;
  --tk-red-tint: #FEF2F2;

  /* Ink / neutrals */
  --ink-900: #0A0A0A;
  --ink-800: #171717;
  --ink-700: #262626;
  --ink-600: #404040;
  --ink-500: #737373;
  --ink-400: #A3A3A3;
  --ink-300: #D4D4D4;
  --ink-200: #E5E5E5;
  --ink-100: #F5F5F5;
  --ink-50:  #FAFAFA;
  --white:   #FFFFFF;

  /* Warm accent for the agency look (tandoor amber). */
  --tk-amber: #E8A33D;
  --tk-charcoal: #14110F;

  /* Semantic */
  --success: #15803D;
  --success-tint: #F0FDF4;
  --warning: #B45309;
  --warning-tint: #FFFBEB;
  --danger:  #B91C1C;
  --danger-tint: #FEF2F2;

  /* Radii */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --sh-lg: 0 12px 32px rgba(0, 0, 0, 0.08);

  /* Typography. Display family is the hero headline (LCP); sans is body.
     Both fall back to system fonts so missing woff2 files degrade cleanly. */
  --font-display: 'TK Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Layout rhythm shared by all brand sections. */
  --tk-maxw: 1200px;
  --tk-gutter: clamp(20px, 5vw, 64px);
  --tk-section-y: clamp(56px, 9vw, 128px);
}