/* ============================================================
   W3NOW DESIGN SYSTEM — Colors & Type
   High-tech vibrance × hospitality luxury
   ============================================================ */

/* ---- Fonts (Google Fonts CDN — see README for substitution notes) ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     BRAND CORE
     ============================================================ */
  --w3-azure:        #56BBEE;  /* logo blue — vibrant tech anchor */
  --w3-ink:          #0B1626;  /* deep midnight — luxury ground */
  --w3-gold:         #C9A86A;  /* champagne gold — VIP accent */

  /* ---- Azure scale (vibrant / tech) ---- */
  --azure-50:   #EAF7FD;
  --azure-100:  #CFEDFB;
  --azure-200:  #A7DDF6;
  --azure-300:  #7DCBF1;
  --azure-400:  #56BBEE;   /* brand */
  --azure-500:  #2BA4E0;
  --azure-600:  #1B86C2;
  --azure-700:  #176A9B;
  --azure-800:  #185878;
  --azure-900:  #173F56;

  /* ---- Ink / midnight scale (luxury ground) ---- */
  --ink-950:  #060D17;
  --ink-900:  #0B1626;
  --ink-800:  #11203440;  /* (token preview only) */
  --ink-800s: #112034;
  --ink-700:  #1A2E45;
  --ink-600:  #25405C;
  --ink-500:  #3A5878;

  /* ---- Champagne / gold scale (VIP luxury) ---- */
  --gold-100:  #F4ECDA;
  --gold-200:  #E7D4AE;
  --gold-300:  #D9BE86;
  --gold-400:  #C9A86A;   /* accent */
  --gold-500:  #B08E4E;
  --gold-600:  #8C6F3A;

  /* ---- Neutrals (cool, blue-leaning) ---- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F7F9FB;
  --neutral-100:  #EDF1F5;
  --neutral-200:  #DCE3EB;
  --neutral-300:  #C2CCD8;
  --neutral-400:  #97A4B4;
  --neutral-500:  #6B7888;
  --neutral-600:  #4D5A6B;
  --neutral-700:  #36424F;
  --neutral-800:  #222B36;
  --neutral-900:  #131A22;

  /* ============================================================
     SEMANTIC — LIGHT SURFACE (default for marketing / docs)
     ============================================================ */
  --bg-base:     var(--neutral-50);
  --bg-surface:  var(--neutral-0);
  --bg-sunken:   var(--neutral-100);
  --bg-inverse:  var(--ink-900);

  --fg-1:  #0F1A28;            /* primary text */
  --fg-2:  var(--neutral-600); /* secondary text */
  --fg-3:  var(--neutral-400); /* muted / captions */
  --fg-on-dark:    #EAF1F8;
  --fg-on-dark-2:  #9DB0C4;

  --border-1:  var(--neutral-200);
  --border-2:  var(--neutral-300);
  --border-strong: var(--neutral-400);

  --accent:        var(--azure-400);
  --accent-hover:  var(--azure-500);
  --accent-press:  var(--azure-600);
  --accent-fg:     #06283A;     /* text on azure fills */
  --vip:           var(--gold-400);
  --vip-deep:      var(--gold-600);

  /* ---- Status ---- */
  --success:  #2FAE7C;
  --warning:  #E0A23C;
  --danger:   #E05A57;
  --info:     var(--azure-500);

  /* ============================================================
     TYPE FAMILIES
     ============================================================ */
  --font-serif:  'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --font-sans:   'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ---- Type scale (1.250 major-third, 16px base) ---- */
  --text-xs:    0.75rem;   /* 12 */
  --text-sm:    0.875rem;  /* 14 */
  --text-base:  1rem;      /* 16 */
  --text-lg:    1.25rem;   /* 20 */
  --text-xl:    1.563rem;  /* 25 */
  --text-2xl:   1.953rem;  /* 31 */
  --text-3xl:   2.441rem;  /* 39 */
  --text-4xl:   3.052rem;  /* 49 */
  --text-5xl:   3.815rem;  /* 61 */
  --text-6xl:   4.768rem;  /* 76 */

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.55;
  --leading-relaxed:1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.18em;  /* eyebrow / overline */

  /* ============================================================
     RADIUS / SHADOW / SPACING / MOTION
     ============================================================ */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-pill: 999px;

  --shadow-sm:  0 1px 2px rgba(11,22,38,0.06), 0 1px 3px rgba(11,22,38,0.08);
  --shadow-md:  0 4px 12px rgba(11,22,38,0.08), 0 2px 4px rgba(11,22,38,0.06);
  --shadow-lg:  0 18px 40px -12px rgba(11,22,38,0.22), 0 6px 14px rgba(11,22,38,0.08);
  --shadow-azure: 0 14px 34px -10px rgba(43,164,224,0.55);
  --shadow-gold:  0 14px 34px -12px rgba(176,142,78,0.45);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   ============================================================ */
.w3-display {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.w3-h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.w3-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.w3-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.w3-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--fg-1);
}
.w3-serif-title {  /* luxury moments — VIP Table, hero accents */
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--fg-1);
}
.w3-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.w3-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.w3-small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.w3-eyebrow {  /* overline / kicker */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}
.w3-eyebrow-gold { color: var(--vip-deep); }
.w3-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
  color: var(--fg-2);
}