/*
 * ╔══════════════════════════════════════════════════╗
 * ║  villaGo — Design Tokens                        ║
 * ║  Single source of truth. Only :root{} here.     ║
 * ╚══════════════════════════════════════════════════╝
 *
 * Breakpoint reference (do not edit — use in media queries):
 *   xs  — max-width: 480px   → small phones (portrait)
 *   sm  — max-width: 768px   → phones landscape / large phones
 *   md  — max-width: 992px   → tablets
 *   lg  — max-width: 1200px  → small desktops / large tablets
 *   xl  — min-width: 1201px  → large desktops (default — no query needed)
 */

:root {

  /* ── COLORS ─────────────────────────────────────── */
  --y-color-primary:          #1B6B4A;
  --y-color-primary-subtle:   rgba(27, 107, 74, 0.1);
  --y-color-primary-dark:     #14503A;
  --y-color-primary-fg:       #FFFFFF;
  --y-color-secondary:        #F5F0E8;
  --y-color-secondary-subtle: #F0EBE1;
  --y-color-accent:           #C8A96E;
  --y-color-accent-subtle:    rgba(200, 169, 110, 0.1);
  --y-color-border:           rgba(45, 42, 38, 0.1);
  --y-color-shadow:           rgba(0, 0, 0, 0.07);
  --y-color-bg:               #FDFBF7;
  --y-color-bg-subtle:        #F5F0E8;
  --y-color-card:             #FFFFFF;
  --y-color-card-fg:          #2D2A26;
  --y-color-text:             #2D2A26;
  --y-color-text-muted:       #8A8378;
  --y-color-input-bg:         #F5F0E8;
  --y-color-footer-bg:        #1a1a1a;
  --y-color-success:          #16a34a;
  --y-color-success-subtle:   #dcfce7;
  --y-color-warning:          #a16207;
  --y-color-warning-subtle:   #fef3c7;
  --y-color-danger:           #d4183d;
  --y-color-danger-subtle:    #fef2f2;

  /* ── FONT SIZES ──────────────────────────────────── */
  --y-font-xs:   0.7rem;
  --y-font-s:    0.8rem;
  --y-font-m:    0.9rem;
  --y-font-l:    1.1rem;
  --y-font-xl:   1.3rem;
  --y-font-xxl:  1.8rem;
  --y-font-xxxl: 2.5rem;

  /* ── FONT WEIGHTS ────────────────────────────────── */
  --y-weight-regular:  400;
  --y-weight-medium:   500;
  --y-weight-semibold: 600;
  --y-weight-bold:     700;

  /* ── SPACING ─────────────────────────────────────── */
  --y-space-xs:  4px;
  --y-space-s:   8px;
  --y-space-m:   16px;
  --y-space-l:   24px;
  --y-space-xl:  40px;
  --y-space-xxl: 64px;

  /* ── BORDER RADIUS ───────────────────────────────── */
  --y-radius-s:    8px;
  --y-radius-m:    12px;
  --y-radius-l:    16px;
  --y-radius-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────────── */
  --y-shadow-s: 0 1px 3px rgba(0, 0, 0, 0.05);
  --y-shadow-m: 0 4px 12px rgba(0, 0, 0, 0.08);
  --y-shadow-l: 0 10px 25px rgba(0, 0, 0, 0.12);

  /* ── TRANSITIONS ─────────────────────────────────── */
  --y-transition-fast:   0.15s ease;
  --y-transition-normal: 0.25s ease;
  --y-transition-slow:   0.4s ease;

  /* ── Z-INDEX ─────────────────────────────────────── */
  --y-z-dropdown: 100;
  --y-z-sticky:   200;
  --y-z-overlay:  300;
  --y-z-modal:    400;
  --y-z-toast:    500;
}