/* ============================================================
   Betel Nut Village — Design System Variables
   ============================================================ */

:root {
  /* Brand Colors */
  --color-primary:          #A11551;
  --color-primary-light:    #C4296E;
  --color-primary-bg:       #FDF2F6;
  --color-secondary:        #1C7293;
  --color-secondary-bg:     #F0F8FB;

  /* Neutral Colors */
  --color-bg:               #FFFFFF;
  --color-surface:          #F7F5F2;
  --color-border:           #E4E0DB;
  --color-text:             #1A1A2E;
  --color-text-secondary:   #6B6878;

  /* Typography */
  --font-display:           Georgia, 'Times New Roman', serif;
  --font-body:              -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type Scale */
  --text-caption:           12px;
  --text-secondary:         14px;
  --text-body:              16px;
  --text-card-title:        18px;
  --text-section:           24px;
  --text-page:              32px;

  /* Spacing */
  --space-xs:               4px;
  --space-sm:               8px;
  --space-md:               16px;
  --space-lg:               24px;
  --space-xl:               32px;
  --space-2xl:              48px;

  /* Borders */
  --radius-sm:              4px;
  --radius-md:              8px;
  --radius-lg:              12px;
  --radius-pill:            9999px;

  /* Shadows */
  --shadow-card:            0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card-hover:      0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-nav:             0 -1px 0 var(--color-border);

  /* Touch Targets */
  --touch-target:           44px;

  /* Transitions */
  --transition-fast:        150ms ease;
  --transition-base:        250ms ease;

  /* Layout */
  --nav-height-mobile:      64px;
  --nav-height-desktop:     56px;
  --content-max-width:      1200px;
}