/* ============================================
   TRAVVANA — Design Tokens (CSS Custom Properties)
   Premium Dark Navy & Orange Theme
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --clr-accent:          #FF8A00;
  --clr-accent-hover:    #FBBF24;
  --clr-accent-light:    rgba(255, 138, 0, 0.15);
  --clr-accent-gradient: linear-gradient(135deg, #FF8A00 0%, #FBBF24 100%);
  --clr-accent-glow:     0 0 24px rgba(255, 138, 0, 0.35);

  /* ── Background Palette (Midnight Explorer) ── */
  --clr-bg-primary:      #050816;
  --clr-bg-secondary:    #0A1228;
  --clr-bg-tertiary:     #111827;
  --clr-bg-card:         #111827;
  --clr-bg-card-hover:   #1F2937;
  --clr-bg-elevated:     #1F2937;
  --clr-bg-overlay:      rgba(0, 0, 0, 0.7);
  --clr-bg-glass:        rgba(10, 18, 40, 0.72);
  --clr-bg-surface:      rgba(17, 24, 39, 0.6);
  --clr-bg-page-gradient: linear-gradient(180deg, #050816 0%, #0A1228 100%);

  /* ── Text Colors ── */
  --clr-text-primary:    #FFFFFF;
  --clr-text-secondary:  #D1D5DB;
  --clr-text-muted:      #9CA3AF;
  --clr-text-inverse:    #050816;
  --clr-text-85:         rgba(255, 255, 255, 0.85);

  /* ── Border / Divider ── */
  --clr-border:          rgba(255, 255, 255, 0.08);
  --clr-border-active:   rgba(255, 138, 0, 0.4);
  --clr-border-subtle:   rgba(255, 255, 255, 0.04);
  --clr-divider:         rgba(255, 255, 255, 0.08);

  /* ── Status Colors ── */
  --clr-success:         #34D399;
  --clr-warning:         #FBBF24;
  --clr-error:           #F87171;
  --clr-info:            #60A5FA;

  /* ── Rating ── */
  --clr-star:            #FBBF24;
  --clr-star-empty:      #2A3040;

  /* ── Category Colors ── */
  --clr-cat-nature:      #34D399;
  --clr-cat-heritage:    #A78BFA;
  --clr-cat-beach:       #38BDF8;
  --clr-cat-temple:      #FB923C;
  --clr-cat-adventure:   #F87171;
  --clr-cat-food:        #FBBF24;
  --clr-cat-shopping:    #EC4899;
  --clr-cat-wildlife:    #4ADE80;

  /* ── Typography ── */
  --ff-primary:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-display:          'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:               0.75rem;    /* 12px */
  --fs-sm:               0.8125rem;  /* 13px */
  --fs-base:             0.875rem;   /* 14px */
  --fs-md:               1rem;       /* 16px */
  --fs-lg:               1.125rem;   /* 18px */
  --fs-xl:               1.25rem;    /* 20px */
  --fs-2xl:              1.5rem;     /* 24px */
  --fs-3xl:              1.875rem;   /* 30px */
  --fs-4xl:              2.25rem;    /* 36px */
  --fs-5xl:              3rem;       /* 48px */

  --fw-regular:          400;
  --fw-medium:           500;
  --fw-semibold:         600;
  --fw-bold:             700;
  --fw-extrabold:        800;

  --lh-tight:            1.2;
  --lh-normal:           1.5;
  --lh-relaxed:          1.7;

  --ls-tight:            -0.02em;
  --ls-normal:           0;
  --ls-wide:             0.02em;
  --ls-wider:            0.05em;

  /* ── Spacing (8px grid system) ── */
  --sp-1:  0.25rem;   /* 4px */
  --sp-2:  0.5rem;    /* 8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */

  /* ── Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  22px;
  --radius-3xl:  28px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow:  0 0 24px rgba(245, 166, 35, 0.3);
  --shadow-card:  0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--clr-border);
  --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--clr-border-active);
  --shadow-float: 0 8px 30px -4px rgba(0, 0, 0, 0.5);

  /* ── Glass Effect ── */
  --glass-bg:     rgba(10, 18, 40, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur:   blur(20px);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --tr-fast:     150ms var(--ease-out);
  --tr-normal:   250ms var(--ease-out);
  --tr-slow:     400ms var(--ease-out);
  --tr-spring:   500ms var(--ease-spring);

  /* ── Z-Index Scale ── */
  --z-base:      1;
  --z-card:      10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-nav:       500;
  --z-overlay:   900;
  --z-modal:     1000;
  --z-toast:     1100;

  /* ── Layout ── */
  --nav-height:      72px;
  --bottom-nav-h:    64px;
  --container-max:   1600px;
  --container-pad:   24px;
  --card-min-width:  280px;
  --sidebar-width:   280px;

  /* ── Card Sizing System ── */
  --card-width:        290px;
  --card-height:       315px;
  --card-gap:          24px;
  --card-radius:       18px;
  --state-card-height: 310px;

  /* ── Chip Sizing ── */
  --chip-height:       44px;
  --chip-radius:       22px;
  --chip-padding:      20px;
  --chip-gap:          12px;

  /* ── Search Bar ── */
  --search-height:     48px;
  --search-radius:     24px;

  /* ── Section Spacing ── */
  --section-gap:       32px;
}