/* WIZARDSKI DESIGN SYSTEM */
/* Living Styleguide - All design tokens in one place */

:root {
  /* Colors */
  --color-bg: #050510;
  --color-bg-elevated: rgba(10, 10, 30, 0.9);
  --color-bg-glass: rgba(5, 5, 16, 0.95);
  --color-primary: #d4b06a;
  --color-primary-hover: #e5c17a;
  --color-primary-muted: rgba(212, 176, 106, 0.15);
  /* Accent green from logo (rgb 90,182,119 = #5AB677) */
  --color-accent: #5AB677;
  --color-accent-hover: #6CC888;
  --color-accent-muted: rgba(90, 182, 119, 0.15);
  --color-accent-border: rgba(90, 182, 119, 0.4);
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-text-dim: rgba(255, 255, 255, 0.3);
  --color-border: rgba(212, 176, 106, 0.2);
  --color-border-subtle: rgba(255, 255, 255, 0.05);
  
  /* Gradients */
  --gradient-hero: linear-gradient(135deg, rgba(26, 58, 90, 0.4) 0%, rgba(5, 5, 16, 1) 40%, rgba(212, 176, 106, 0.15) 100%);
  --gradient-cta: linear-gradient(180deg, rgba(212, 176, 106, 0.05) 0%, rgba(5, 5, 16, 1) 100%);
  
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', Monaco, monospace;
  
  /* Font Sizes */
  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-hero: clamp(4rem, 10vw, 8rem);
  --text-price: clamp(2.5rem, 5vw, 4rem);
  
  /* Font Weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  
  /* Spacing */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 60px;
  --space-4xl: 80px;
  --space-5xl: 100px;
  
  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 18px;
  --radius-full: 50%;
  
  /* Transitions */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  --duration-slower: 0.8s;
  
  /* Z-index */
  --z-nav: 200;
  --z-drawer: 180;
  --z-overlay: 150;
  --z-progress: 50;
  --z-title: 10;
  --z-canvas: 1;
  
  /* Layout */
  --nav-height-mobile: 82px;
  --nav-height-desktop: 80px;
  --max-width: 1200px;
  --content-padding: 48px;
  --content-padding-mobile: 24px;
  
  /* Breakpoints (for reference, use in @media) */
  --bp-mobile: 599px;
  --bp-desktop: 600px;

  /* ── Shared chrome tokens (used by components/nav.css; fallbacks keep legacy pages identical) ── */
  /* Nav chrome: exact current v18 nav darks, tokenized */
  --nav-glass: rgba(6, 6, 13, 0.92);          /* top bar glass (night) */
  --nav-glass-bottom: rgba(5, 5, 16, 0.92);   /* mobile bottom bar glass (night) */
  --nav-hairline: rgba(212, 176, 106, 0.15);  /* gold hairline under/above bars (night) */
  --nav-text: #ffffff;                        /* nav text (night) */
  --nav-text-muted: rgba(255, 255, 255, 0.6); /* nav secondary text (night) */

  /* Book/package-page tokens — promoted from components/package-book.css (Wave 0.5):
     ghost-gold ladder, CTA glass fill, display font. The gold ladder and the font
     are brand-invariant across themes; --glass-cta has a day counterpart below. */
  --gold-30: rgba(212, 176, 106, 0.3);
  --gold-40: rgba(212, 176, 106, 0.4);
  --glass-cta: rgba(10, 10, 46, 0.5);         /* ghost-gold CTA fill (night) */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ── DAY THEME — [data-theme="light"] ──
   Same brand: identical gold family (#d4b06a / #c0a05a / #e8c87a), identical spacing,
   radii, type scale and motion. Only surfaces, background and text swap (night → day). */
[data-theme="light"] {
  /* Day paper: warm cream derived from the package-book cream system (#f5f0e8) */
  --color-bg: #f5f0e8;
  /* Lifted surface: white card glass floating on the paper */
  --color-bg-elevated: rgba(255, 255, 255, 0.85);
  /* Frosted paper glass for bars/menus/overlays */
  --color-bg-glass: rgba(250, 247, 240, 0.92);
  /* Warm ink text (cream system ink #2c2416) */
  --color-text: #2c2416;
  /* Secondary text: ink at ~68% */
  --color-text-muted: rgba(44, 36, 22, 0.68);
  /* Faint text: ink at ~42% */
  --color-text-dim: rgba(44, 36, 22, 0.42);
  /* Gold hairline via the #c0a05a family step at 40% — same gold family as night */
  --color-border: rgba(192, 160, 90, 0.4);
  /* Barely-there ink line for subtle dividers */
  --color-border-subtle: rgba(44, 36, 22, 0.08);
  /* Accent green — deeper for contrast on light backgrounds */
  --color-accent: #3D9A5E;
  --color-accent-hover: #4DAA6E;
  --color-accent-muted: rgba(61, 154, 94, 0.12);
  --color-accent-border: rgba(61, 154, 94, 0.35);
  /* Day-sky hero: pale alpine blue fading to cream paper, same gold glow */
  --gradient-hero: linear-gradient(135deg, rgba(191, 214, 236, 0.5) 0%, rgba(245, 240, 232, 1) 40%, rgba(212, 176, 106, 0.15) 100%);
  /* CTA wash: same gold tint settling into cream paper */
  --gradient-cta: linear-gradient(180deg, rgba(212, 176, 106, 0.05) 0%, rgba(245, 240, 232, 1) 100%);

  /* Nav chrome, day */
  --nav-glass: rgba(250, 247, 240, 0.92);        /* top bar glass (day) */
  --nav-glass-bottom: rgba(245, 240, 232, 0.94); /* mobile bottom bar glass (day) */
  --nav-hairline: rgba(212, 176, 106, 0.25);     /* gold hairline (day) — same family */
  --nav-text: #2c2416;                           /* nav text (day) */
  --nav-text-muted: rgba(44, 36, 22, 0.65);      /* nav secondary text (day) */

  /* Book/package-page tokens, day: same gold family (brand-invariant);
     the CTA fill settles onto the cream paper. */
  --gold-30: rgba(212, 176, 106, 0.3);
  --gold-40: rgba(212, 176, 106, 0.4);
  --glass-cta: rgba(255, 255, 255, 0.72);        /* day counterpart of the ghost-gold fill */

  /* Hint the browser: light UI chrome */
  color-scheme: light;
}