/* ═══════════════════════════════════════════════════════════
   Campercation Design Tokens
   Source of truth: Figma Design System
   https://www.figma.com/design/wobIIq4p057II3axGzSf9l
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Colours ── */
  --brand-blue:       #4d6c8f;
  --brand-blue-dark:  #092a52;
  --brand-blue-hover: #3b5a7d;
  --brand-green:      #19b68d;
  --brand-teal:       #08C9B5;
  --brand-teal-dark:  #039d8d;

  --surface:          #ffffff;
  --surface-subtle:   #f8f9fa;
  --surface-muted:    #e9ecef;

  --border:           #dee2e6;
  --border-light:     #eee;

  --text-primary:     #1a1a2e;
  --text-secondary:   #555;
  --text-muted:       #888;
  --text-on-dark:     #ffffff;

  --pro-gradient-start: #4d6c8f;
  --pro-gradient-end:   #08C9B5;

  --success:          #28a745;
  --warning:          #ffc107;
  --warning-bg:       #fff3cd;
  --danger:           #dc3545;

  /* ── Typography ── */
  --font-family:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'Roboto Mono', monospace;

  /* 6-level mobile type scale */
  --text-xl:   20px;   /* Page titles */
  --text-lg:   15px;   /* Section headings */
  --text-md:   14px;   /* Body / card titles */
  --text-base: 13px;   /* Default body */
  --text-sm:   12px;   /* Metadata, captions */
  --text-xs:   11px;   /* Fine print, badges */

  --line-height:      1.5;
  --line-height-tight: 1.25;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;

  /* ── Spacing (4px base) ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ── Border Radius ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);

  /* ── Place Card specs (from Figma) ── */
  --card-width:      343px;
  --card-radius:     var(--radius-md);
  --card-shadow:     var(--shadow-sm);
  --card-thumb-h:    110px;

  /* ── Z-index scale ── */
  --z-sticky:    100;
  --z-overlay:   500;
  --z-modal:     1000;
  --z-popover:   1100;
}