/* ==========================================================================
   VAYU HOLIDAYS — DESIGN SYSTEM
   Philosophy: Aman calm · Apple precision · Aesop restraint
   Typeface: Cormorant Garamond (display) + Inter (body)
   Palette: Near-white base · True black type · Warm stone accent
   ========================================================================== */

:root {

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────────── */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Playfair Display', 'Georgia', serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── BASE PALETTE ───────────────────────────────────────────────────── */

  /* True backgrounds — slightly warm, never cold-white */
  --c-bg:          #FAFAF8;   /* warm near-white — base canvas */
  --c-bg-subtle:   #F5F4F1;   /* sections, cards, inset areas */
  --c-bg-muted:    #EEECE8;   /* borders, dividers, disabled */

  /* Ink — editorial black hierarchy */
  --c-ink:         #0F0F0E;   /* primary text — near-black */
  --c-ink-2:       #3A3A37;   /* secondary text */
  --c-ink-3:       #6B6B66;   /* tertiary / muted captions */
  --c-ink-4:       #9B9A95;   /* placeholder, disabled */

  /* Accent — warm stone/sand (single restrained luxury accent) */
  --c-accent:      #B8A99A;   /* warm stone — the only accent */
  --c-accent-dark: #8C7B6E;   /* darker for hover states */
  --c-accent-pale: #F2EDE8;   /* accent tint for backgrounds */

  /* Dark surfaces — footer, hero overlays */
  --c-dark:        #111110;   /* deep dark for contrast sections */
  --c-dark-2:      #1C1C1A;   /* slightly lighter dark */
  --c-dark-muted:  rgba(255,255,255,0.55);  /* text on dark bg */
  --c-dark-faint:  rgba(255,255,255,0.25);  /* subtle on dark */

  /* Borders */
  --c-border:      rgba(15,15,14,0.08);    /* default border */
  --c-border-mid:  rgba(15,15,14,0.14);    /* medium border */
  --c-border-dark: rgba(255,255,255,0.10); /* border on dark bg */

  /* Legacy aliases — keeps existing CSS working */
  --color-ivory:          var(--c-bg);
  --color-cream:          var(--c-bg);
  --color-sand:           var(--c-bg-subtle);
  --color-sand-dark:      var(--c-bg-muted);
  --color-stone:          var(--c-bg-muted);
  --color-bg:             var(--c-bg-subtle);
  --color-obsidian:       var(--c-dark);
  --color-obsidian-light: var(--c-dark-2);
  --color-slate-dark:     #2A2A28;
  --color-slate-medium:   var(--c-ink-2);
  --color-slate-light:    var(--c-ink-3);
  --color-primary:        var(--c-ink);
  --color-primary-dark:   #000000;
  --color-primary-light:  var(--c-ink-2);
  --color-primary-pale:   var(--c-bg-subtle);
  --color-primary-muted:  rgba(15,15,14,0.06);
  --color-accent:         var(--c-accent);
  --color-gold:           var(--c-accent);
  --color-gold-light:     #D4C4B5;
  --color-gold-dark:      var(--c-accent-dark);
  --color-gold-muted:     rgba(184,169,154,0.15);
  --color-text-main:      var(--c-ink);
  --color-text-muted:     var(--c-ink-3);
  --color-text-light:     var(--c-ink-4);
  --color-text-inverse:   #FAFAF8;
  --color-text-inverse-muted: var(--c-dark-muted);
  --color-white:          #FFFFFF;
  --border-subtle:        var(--c-border);
  --border-medium:        var(--c-border-mid);
  --border-gold:          rgba(184,169,154,0.35);
  --border-dark:          var(--c-border-dark);
  --border-dark-subtle:   rgba(255,255,255,0.06);
  --bg-glass-light:       rgba(250,250,248,0.94);
  --bg-glass-dark:        rgba(17,17,16,0.88);
  --color-terracotta:       var(--c-ink);
  --color-terracotta-hover: var(--c-dark);
  --color-emerald-deep:     #1A3D2A;
  --color-azure-subtle:     #1A2E40;

  /* ── SHADOWS ─────────────────────────────────────────────────────────  */
  /* Extremely restrained — almost invisible */
  --shadow-xs:   0 1px 2px rgba(15,15,14,0.04);
  --shadow-sm:   0 2px 6px rgba(15,15,14,0.06);
  --shadow-md:   0 4px 16px rgba(15,15,14,0.07);
  --shadow-lg:   0 12px 36px rgba(15,15,14,0.08);
  --shadow-xl:   0 24px 56px rgba(15,15,14,0.09);
  --shadow-card: 0 1px 3px rgba(15,15,14,0.05);
  --shadow-primary: 0 4px 16px rgba(15,15,14,0.14);
  --shadow-accent:  0 4px 16px rgba(184,169,154,0.20);

  /* ── RADIUS ──────────────────────────────────────────────────────────  */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ── 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);

  --transition-fast:   all 0.18s var(--ease-in-out);
  --transition-smooth: all 0.32s var(--ease-out);
  --transition-slow:   all 0.55s var(--ease-out);

  /* ── SPACING SCALE ───────────────────────────────────────────────────  */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */
  --space-11: 10rem;     /* 160px */
  --space-12: 14rem;     /* 224px */

  /* ── LAYOUT ──────────────────────────────────────────────────────────  */
  --container-max:    1240px;
  --container-narrow: 960px;
  --container-wide:   1440px;
}
