/**
 * Lore Core Design System – bridge for lore-co site
 *
 * This file overrides lore-co's CSS variables with values from the
 * lore-core design system (tokens) so you can preview how the site
 * looks with Lore Core colors and typography.
 *
 * Usage: In index.html (and other pages), add after explore.css:
 *   <link rel="stylesheet" href="lore-core-bridge.css">
 *
 * Source: lore-core/design-system/tokens/tokens.json
 * Update this file when design tokens change.
 */

:root {
  /* Lore Core – Teal (brand) */
  --brand-teal: #3794AA !important;   /* teal-500 */
  --brand-deep: #13707F !important;   /* teal-700 */

  /* Lore Core – Green */
  --brand-green: #4DB748 !important;  /* green-500 */

  /* Lore Core – Greyscale (text & surfaces) */
  --dark: #1A1A1A !important;         /* greyscale-900 */
  --text: #3D3D3D !important;          /* greyscale-800 */
  --muted: #6D6D6D !important;        /* greyscale-600 */
  --surface: #FFFFFF !important;      /* greyscale-white */

  /* Gradients – using Lore Core teal/green */
  --gradient-hero: linear-gradient(180deg, #3794AA 0%, #13707F 100%) !important;
  --gradient-green: radial-gradient(1200px 600px at 15% 20%, rgba(255,255,255,0.25), rgba(255,255,255,0) 40%), linear-gradient(90deg, #377524 0%, #4DB748 100%) !important;
  --gradient-purple: radial-gradient(1200px 600px at 80% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0) 40%), linear-gradient(90deg, #5b60d6 0%, #9a6ee8 100%) !important;

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 12px;
  --shadow-elev: 0 12px 40px rgba(16, 24, 40, 0.2);
}