/* ===================================================================
   JD's Vegan Dives — Design Tokens
   Premium vegan discovery — elevated design system
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* --- Color Palette (Green + Gold, Apple 2026 — Dark) --- */
  --accent:              #0B3D2E;
  --accent-hover:        #092F24;
  --accent-light:        #14614A;
  --accent-18:           rgba(11, 61, 46, 0.35);
  --accent-08:           rgba(11, 61, 46, 0.22);
  --accent-warm:         #D4AF37;
  --accent-peach:        #F5E6B8;
  --accent-mint:         #7ECFB3;
  --accent-gold:         #D4AF37;
  --accent-danger:       #C94B4B;
  --accent-text:         #7ECFB3;  /* mint — readable accent on dark bg */

  /* --- Gradient Presets --- */
  --gradient-hero:       linear-gradient(160deg, #0A0A0A 0%, #0D0D0D 50%, #0A0A0A 100%);
  --gradient-accent:     linear-gradient(135deg, #14614A 0%, #2A8C68 45%, #D4AF37 100%);
  --gradient-warm:       linear-gradient(135deg, #F5E6B8 0%, #D4AF37 100%);
  --gradient-dark:       linear-gradient(160deg, #0A0A0A 0%, #111111 50%, #0A0A0A 100%);
  --gradient-card-hover: linear-gradient(135deg, rgba(11, 61, 46, 0.18) 0%, rgba(212, 175, 55, 0.06) 100%);

  /* --- Surfaces --- */
  --bg:                  #0A0A0A;
  --surface-subtle:      #111111;
  --surface-card:        rgba(255, 255, 255, 0.06);
  --surface-elevated:    rgba(255, 255, 255, 0.09);
  --surface-translucent: rgba(10, 10, 10, 0.85);
  --surface-inset:       rgba(255, 255, 255, 0.05);
  --surface-dark:        #1C1C1E;

  /* --- Text --- */
  --text-primary:        #FFFFFF;
  --text-secondary:      rgba(255, 255, 255, 0.55);
  --text-tertiary:       rgba(255, 255, 255, 0.35);
  --text-on-accent:      #FFFFFF;
  --text-on-dark:        rgba(255, 255, 255, 0.85);

  /* --- Borders --- */
  --border:              rgba(255, 255, 255, 0.08);
  --border-accent:       rgba(20, 97, 74, 0.45);

  /* --- Shadows --- */
  --shadow-soft:         0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md:           0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:           0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-card:         0 2px 16px rgba(0, 0, 0, 0.3);
  --shadow-card-hover:   0 12px 40px rgba(11, 61, 46, 0.25);
  --shadow-sheet:        0 -20px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow:         0 0 30px rgba(11, 61, 46, 0.35);

  /* --- Border Radius --- */
  --radius-sm:           8px;
  --radius-md:           12px;
  --radius-lg:           18px;
  --radius-xl:           24px;
  --radius-2xl:          32px;
  --radius-full:         9999px;
  --card-radius:         20px;

  /* --- Spacing Scale --- */
  --space-1:             4px;
  --space-2:             8px;
  --space-3:             12px;
  --space-4:             16px;
  --space-5:             24px;
  --space-6:             32px;
  --space-7:             48px;
  --space-8:             64px;
  --space-9:             96px;
  --space-10:            128px;

  /* --- Layout --- */
  --container-width:     1200px;
  --container-narrow:    980px;
  --header-height:       72px;
  --gutter:              24px;
  --sidebar-width:       420px;

  /* --- Typography --- */
  --font-family:         -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
                         system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  --font-size-base:      16px;
  --font-size-sm:        14px;
  --font-size-xs:        12px;
  --font-size-lg:        18px;
  --font-size-xl:        24px;
  --font-size-2xl:       32px;
  --font-size-3xl:       40px;
  --font-size-4xl:       56px;
  --font-size-5xl:       72px;
  --line-height:         1.6;

  /* --- Animation --- */
  --ease:                cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce:         cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring:         cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:     120ms var(--ease);
  --transition-normal:   200ms var(--ease);
  --transition-slow:     320ms var(--ease-bounce);
  --transition-reveal:   700ms var(--ease-spring);
}