/* ==========================================================================
   DESIGN TOKENS — SafariRanthambore.com
   CSS Custom Properties for the entire design system.
   ========================================================================== */

/* ---------- Light Theme (Default) ---------- */
:root,
[data-theme="light"] {
  /* Background */
  --color-bg:              #F6F1E8;
  --color-surface:         #FBF7F0;
  --color-surface-2:       #F0E8DB;
  --color-surface-offset:  #E6DCCB;

  /* Borders & Dividers */
  --color-border:          #D5C8B4;
  --color-divider:         #DDD1C0;

  /* Text */
  --color-text:            #201A12;
  --color-text-muted:      #655949;
  --color-text-faint:      #736454; /* WCAG AA: 5.2:1 on #F6F1E8 (was #968977 ≈ 2.8:1) */
  --color-text-inverse:    #FFFAF3;

  /* Brand */
  --color-primary:         #6B4F2A;
  --color-primary-hover:   #553D1F;
  --color-primary-light:   #D9C6A7;
  --color-primary-rgb:     107, 79, 42;

  /* Accent */
  --color-gold:            #9A6F1E; /* WCAG AA: 5.0:1 on #F6F1E8 (was #B8872F ≈ 3.5:1) */
  --color-gold-light:      #F5E6C8;

  /* Semantic */
  --color-success:         #48613A;
  --color-success-light:   #E1EDDA;
  --color-danger:          #9E3B33;
  --color-danger-light:    #F9E5E3;
  --color-info:            #3B6596;
  --color-info-light:      #E0EDF7;
  --color-warning:         #97712B;
  --color-warning-light:   #FDF3E0;

  /* Overlay */
  --overlay-light:         rgba(246, 241, 232, 0.88);
  --overlay-dark:          rgba(32, 26, 18, 0.55);
  --overlay-image:         linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.50));

  /* Shadows */
  --shadow-xs:   0 1px 3px rgba(43, 30, 13, 0.04);
  --shadow-sm:   0 4px 12px rgba(43, 30, 13, 0.06);
  --shadow-md:   0 8px 24px rgba(43, 30, 13, 0.08);
  --shadow-lg:   0 16px 48px rgba(43, 30, 13, 0.12);
  --shadow-xl:   0 24px 64px rgba(43, 30, 13, 0.16);
  --shadow-glow: 0 0 0 4px rgba(107, 79, 42, 0.12);
}

/* ---------- Dark Theme ---------- */
[data-theme="dark"] {
  --color-bg:              #16120D;
  --color-surface:         #1D1812;
  --color-surface-2:       #241D16;
  --color-surface-offset:  #2D251C;

  --color-border:          #4B3C2B;
  --color-divider:         #3C3124;

  --color-text:            #F3EADC;
  --color-text-muted:      #C7B89F;
  --color-text-faint:      #9E8F79;
  --color-text-inverse:    #17120D;

  --color-primary:         #B78A49;
  --color-primary-hover:   #C99D5E;
  --color-primary-light:   #423423;
  --color-primary-rgb:     183, 138, 73;

  --color-gold:            #DDB15A;
  --color-gold-light:      #3D3018;

  --color-success:         #7CA06A;
  --color-success-light:   #243020;
  --color-danger:          #D07070;
  --color-danger-light:    #3A2020;
  --color-info:            #6EA8D7;
  --color-info-light:      #1E2D3A;
  --color-warning:         #D4A94E;
  --color-warning-light:   #3A2E18;

  --overlay-light:         rgba(22, 18, 13, 0.88);
  --overlay-dark:          rgba(0, 0, 0, 0.65);
  --overlay-image:         linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.60));

  --shadow-xs:   0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-sm:   0 4px 12px rgba(0, 0, 0, 0.18);
  --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.38);
  --shadow-xl:   0 24px 64px rgba(0, 0, 0, 0.48);
  --shadow-glow: 0 0 0 4px rgba(183, 138, 73, 0.18);
}

/* ---------- Typography ---------- */
:root {
  --font-serif:   'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-sans:    'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Type Scale (1.25 Major Third) */
  --text-xs:    0.75rem;      /* 12px */
  --text-sm:    0.875rem;     /* 14px */
  --text-base:  1rem;         /* 16px */
  --text-lg:    1.125rem;     /* 18px */
  --text-xl:    1.25rem;      /* 20px */
  --text-2xl:   1.5rem;       /* 24px */
  --text-3xl:   1.875rem;     /* 30px */
  --text-4xl:   2.25rem;      /* 36px */
  --text-5xl:   3rem;         /* 48px */
  --text-6xl:   3.75rem;      /* 60px */
  --text-7xl:   4.5rem;       /* 72px */

  /* Line Heights */
  --leading-none:   1;
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Letter Spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.12em;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-extra:   800;
}

/* ---------- Spacing ---------- */
:root {
  --space-0:  0;
  --space-1:  0.25rem;    /* 4px */
  --space-2:  0.5rem;     /* 8px */
  --space-3:  0.75rem;    /* 12px */
  --space-4:  1rem;       /* 16px */
  --space-5:  1.25rem;    /* 20px */
  --space-6:  1.5rem;     /* 24px */
  --space-7:  1.75rem;    /* 28px */
  --space-8:  2rem;       /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-32: 8rem;       /* 128px */
}

/* ---------- Border Radius ---------- */
:root {
  --radius-xs:   0.25rem;     /* 4px */
  --radius-sm:   0.5rem;      /* 8px */
  --radius-md:   0.75rem;     /* 12px */
  --radius-lg:   1rem;        /* 16px */
  --radius-xl:   1.25rem;     /* 20px */
  --radius-2xl:  1.5rem;      /* 24px */
  --radius-3xl:  2rem;        /* 32px */
  --radius-full: 9999px;
}

/* ---------- Layout ---------- */
:root {
  --container-max:  1200px;
  --container-wide: 1400px;
  --container-pad:  1.25rem;
  --header-height:  76px;
  --section-py:     5rem;
}

/* ---------- Z-Index ---------- */
:root {
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   500;
  --z-overlay:  800;
  --z-modal:    900;
  --z-toast:    1000;
  --z-tooltip:  1100;
}

/* ---------- Transitions ---------- */
:root {
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   0.15s;
  --duration-normal: 0.25s;
  --duration-slow:   0.4s;
  --duration-slower: 0.6s;

  --transition-fast:   all 0.15s var(--ease-out);
  --transition-normal: all 0.25s var(--ease-out);
  --transition-slow:   all 0.4s var(--ease-out);
}

/* ---------- Breakpoints (Reference — used in media queries) ----------
   Mobile:   0 – 480px
   Phablet:  481 – 680px
   Tablet:   681 – 980px
   Desktop:  981 – 1200px
   Wide:     1201px+
   ========================================================================== */