/* ============================================================
   HoteliersClub v2 — Design System
   Theme: India Emerald + Saffron
   Primary: #1A6B4A (Emerald — India national colour)
   Accent:  #E8900A (Saffron — India national colour)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ── Custom Properties ──────────────────────────────────── */
:root {
  /* Emerald Green */
  --hc-primary:        #1A6B4A;
  --hc-primary-dark:   #0D4835;
  --hc-primary-mid:    #155C3E;
  --hc-primary-light:  #2A8B62;
  --hc-primary-pale:   #E8F5EF;

  /* Saffron Amber */
  --hc-accent:         #E8900A;
  --hc-accent-dark:    #C47A08;
  --hc-accent-light:   #F5A623;
  --hc-accent-pale:    #FEF3E2;

  /* Backgrounds */
  --hc-bg:             #F7F3EC;
  --hc-bg-alt:         #EDE8DF;
  --hc-surface:        #FFFFFF;
  --hc-surface-warm:   #FFFDF9;

  /* Dark Sections */
  --hc-dark:           #0B3028;
  --hc-dark-alt:       #0F3D30;
  --hc-dark-card:      rgba(255,255,255,0.06);
  --hc-dark-border:    rgba(255,255,255,0.1);

  /* Text */
  --hc-text:           #1A2720;
  --hc-text-secondary: #3D5248;
  --hc-text-muted:     #6B7F75;
  --hc-text-faint:     #9EB0A8;
  --hc-text-on-dark:   #FFFFFF;
  --hc-text-on-dark-muted: rgba(255,255,255,0.7);

  /* Borders */
  --hc-border:         #D4CFC6;
  --hc-border-light:   #E8E3DA;
  --hc-border-dark:    #C4BFB6;

  /* Shadows */
  --hc-shadow-sm:      0 1px 4px rgba(26,107,74,0.08);
  --hc-shadow:         0 4px 16px rgba(26,107,74,0.10);
  --hc-shadow-md:      0 8px 32px rgba(26,107,74,0.12);
  --hc-shadow-lg:      0 16px 48px rgba(26,107,74,0.14);
  --hc-shadow-xl:      0 24px 64px rgba(26,107,74,0.18);

  /* Status */
  --hc-success:        #1A6B4A;
  --hc-success-pale:   #E8F5EF;
  --hc-warning:        #E8900A;
  --hc-warning-pale:   #FEF3E2;
  --hc-error:          #C42B2B;
  --hc-error-pale:     #FDEAEA;
  --hc-info:           #1E6FA8;
  --hc-info-pale:      #E6F1FA;

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Transitions */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:    0.15s;
  --dur:         0.2s;
  --dur-slow:    0.35s;

  /* Layout */
  --nav-h:       64px;
  --container:   1240px;
  --container-sm: 720px;
  --container-lg: 1440px;
  --sidebar-w:   280px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--hc-text);
  background: var(--hc-bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
ul, ol { list-style: none; }

/* ── Typography ─────────────────────────────────────────── */
.font-display  { font-family: 'Playfair Display', Georgia, serif; }
.font-body     { font-family: 'Plus Jakarta Sans', sans-serif; }
.font-mono     { font-family: 'DM Mono', monospace; }

.display-xl { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(40px, 6vw, 72px); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.display-lg { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(32px, 5vw, 56px); line-height: 1.1;  font-weight: 700; letter-spacing: -0.02em; }
.display-md { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(26px, 4vw, 40px); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.heading-xl  { font-size: clamp(22px, 3vw, 32px); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.heading-lg  { font-size: clamp(18px, 2.5vw, 24px); line-height: 1.35; font-weight: 700; }
.heading-md  { font-size: clamp(16px, 2vw, 20px); line-height: 1.4;  font-weight: 600; }
.heading-sm  { font-size: 16px; line-height: 1.5; font-weight: 600; }
.body-lg     { font-size: 18px; line-height: 1.7; }
.body-md     { font-size: 16px; line-height: 1.65; }
.body-sm     { font-size: 14px; line-height: 1.6; }
.caption     { font-size: 12px; line-height: 1.5; font-weight: 500; letter-spacing: 0.02em; }
.overline    { font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mono        { font-family: 'DM Mono', monospace; font-size: 14px; }

/* ── Colours ────────────────────────────────────────────── */
.text-primary   { color: var(--hc-primary); }
.text-accent    { color: var(--hc-accent); }
.text-muted     { color: var(--hc-text-muted); }
.text-secondary { color: var(--hc-text-secondary); }
.text-on-dark   { color: var(--hc-text-on-dark); }
.text-error     { color: var(--hc-error); }
.bg-primary     { background: var(--hc-primary); }
.bg-accent      { background: var(--hc-accent); }
.bg-pale        { background: var(--hc-primary-pale); }
.bg-dark        { background: var(--hc-dark); }
.bg-surface     { background: var(--hc-surface); }
.bg-warm        { background: var(--hc-bg); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--radius-md); border: 2px solid transparent;
  font-size: 14px; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
}
.btn:focus-visible { outline: 3px solid var(--hc-accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--hc-primary); color: #fff; border-color: var(--hc-primary);
}
.btn-primary:hover:not(:disabled) {
  background: var(--hc-primary-dark); border-color: var(--hc-primary-dark);
  transform: translateY(-1px); box-shadow: var(--hc-shadow-md);
}

.btn-accent {
  background: var(--hc-accent); color: #fff; border-color: var(--hc-accent);
}
.btn-accent:hover:not(:disabled) {
  background: var(--hc-accent-dark); border-color: var(--hc-accent-dark);
  transform: translateY(-1px); box-shadow: 0 8px 24px rgba(232,144,10,0.3);
}

.btn-outline {
  background: transparent; color: var(--hc-primary); border-color: var(--hc-primary);
}
.btn-outline:hover:not(:disabled) {
  background: var(--hc-primary); color: #fff;
  transform: translateY(-1px);
}

.btn-outline-white {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.6);
}
.btn-outline-white:hover:not(:disabled) {
  background: rgba(255,255,255,0.12); border-color: #fff;
}

.btn-ghost {
  background: transparent; color: var(--hc-text-secondary); border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { color: var(--hc-primary); background: var(--hc-primary-pale); }

.btn-ghost-white {
  background: transparent; color: rgba(255,255,255,0.8); border-color: transparent;
}
.btn-ghost-white:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,0.1); }

.btn-sm  { padding: 7px 14px; font-size: 13px; }
.btn-lg  { padding: 14px 32px; font-size: 16px; border-radius: var(--radius-lg); }
.btn-xl  { padding: 18px 40px; font-size: 18px; border-radius: var(--radius-lg); }
.btn-icon { padding: 10px; border-radius: var(--radius-md); }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; line-height: 1.4;
  white-space: nowrap;
}
.badge-emerald   { background: var(--hc-primary-pale); color: var(--hc-primary); }
.badge-saffron   { background: var(--hc-accent-pale); color: var(--hc-accent-dark); }
.badge-dark      { background: var(--hc-dark); color: #fff; }
.badge-outline   { background: transparent; color: var(--hc-primary); border: 1.5px solid var(--hc-primary); }
.badge-muted     { background: var(--hc-bg-alt); color: var(--hc-text-muted); }
.badge-success   { background: var(--hc-success-pale); color: var(--hc-success); }
.badge-warning   { background: var(--hc-warning-pale); color: var(--hc-accent-dark); }
.badge-error     { background: var(--hc-error-pale); color: var(--hc-error); }
.badge-verified  { background: var(--hc-primary); color: #fff; }
.badge-verified::before { content: '✓ '; }
.badge-india     { background: linear-gradient(135deg, var(--hc-accent) 0%, var(--hc-accent-light) 100%); color: #fff; }
.badge-lg { padding: 6px 14px; font-size: 13px; }

/* ── Forms ──────────────────────────────────────────────── */
.form-group  { display: flex; flex-direction: column; gap: 6px; }
.form-label  { font-size: 13px; font-weight: 600; color: var(--hc-text-secondary); }
.form-label .required { color: var(--hc-error); margin-left: 2px; }

.form-input, .form-select, .form-textarea {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--hc-border);
  border-radius: var(--radius-md);
  background: var(--hc-surface);
  color: var(--hc-text);
  font-size: 15px; line-height: 1.5;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--hc-primary);
  box-shadow: 0 0 0 3px rgba(26,107,74,0.12);
}
.form-input::placeholder { color: var(--hc-text-faint); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7F75' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.form-error  { font-size: 12px; color: var(--hc-error); }
.form-hint   { font-size: 12px; color: var(--hc-text-muted); }
.form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* ── Divider ─────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--hc-border-light); margin: 24px 0; }
.divider-dark { border-top-color: var(--hc-dark-border); }

/* ── Tag ─────────────────────────────────────────────────── */
.tag {
  display: inline-block; padding: 4px 10px; border-radius: var(--radius-full);
  background: var(--hc-bg-alt); color: var(--hc-text-secondary);
  font-size: 12px; font-weight: 500; border: 1px solid var(--hc-border-light);
}