/* ============================================================
   DREAM EXPERIENCES — Core Color & Type Tokens
   "Hold the dream."
   Import this file first; everything else builds on it.
   Both brand families are self-hosted below from /fonts:
   Display font (MuseoModerno) + Body/UI font (Hanken Grotesk),
   each as a variable font with roman + italic. No CDN needed.
   ============================================================ */

/* Brand display typeface — the wordmark font. Variable weight 100–900. */
@font-face {
  font-family: "MuseoModerno";
  src: url("../fonts/MuseoModerno-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MuseoModerno";
  src: url("../fonts/MuseoModerno-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Body / UI typeface — self-hosted. Variable weight 100–900, roman + italic. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Nunito — the "experiences" sub-lockup face. Self-hosted (roman + italic) so
   it renders identically offline / embedded. */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND CORE ---------- */
  /* Dream Blue — THE brand color (the wordmark). Soft, dreamy, hopeful. */
  --blue-700: #4E7AA6;    /* deepened — for text/links on cream (AA) */
  --blue-600: #5E8DBC;
  --blue-500: #6F9CC6;
  --blue-400: #81AACF;    /* ★ the logo blue — primary brand */
  --blue-300: #9DBEDB;
  --blue-200: #BCD3E6;
  --blue-100: #DCE9F2;
  --blue-50:  #EDF3F8;

  /* Ink — deep dusk navy. Primary text + dark "night sky" surfaces. */
  --night-900: #0F1730;   /* deepest */
  --night-800: #16213A;   /* ★ primary ink (the logo's dark alt) */
  --night-700: #1F2E4D;
  --night-600: #2C3E63;
  --night-500: #41557E;

  /* Cream — the warm canvas (the logo background). Never clinical white. */
  --cream-200: #DCD8C7;   /* deeper oatmeal — borders/fills on cream */
  --cream-100: #E8E6D8;   /* ★ brand cream (logo bg) */
  --cream-50:  #F3F1E8;   /* lightest paper — default page bg */

  /* Spotlight Coral — joy, energy, the live moment. Lead warm accent. */
  --coral-700: #E23E58;
  --coral-600: #FB4E69;
  --coral-500: #FF5C72;   /* brand coral */
  --coral-400: #FF7C8D;
  --coral-300: #FFA3AF;
  --coral-100: #FFE3E7;

  /* Sunrise Gold — warmth, optimism, the spark. Secondary warm accent. */
  --gold-600: #F39A1C;
  --gold-500: #FFB13C;    /* brand gold */
  --gold-400: #FFC366;
  --gold-300: #FFD899;
  --gold-100: #FFF1D6;

  /* ---------- NEUTRALS (warm, oatmeal-tinted) ---------- */
  --canvas:    #F3F1E8;   /* warm paper — default page background */
  --surface:   #FFFFFF;   /* cards, raised surfaces */
  --mist:      #ECEADF;   /* subtle fills, inputs (on cream) */
  --line:      #DEDBCC;   /* hairline borders (warm) */
  --line-strong: #CBC7B5;
  --slate-700: #3A4256;   /* strong secondary text */
  --slate-500: #5E657A;   /* muted body text */
  --slate-400: #868DA0;   /* captions, placeholders */
  --slate-300: #ABB1C0;   /* disabled */

  /* ---------- SEMANTIC ---------- */
  --success: #2FA875;
  --success-bg: #E6F6EF;
  --warning: #F39A1C;
  --warning-bg: #FFF1D6;
  --danger:  #E2455A;
  --danger-bg: #FDE7EA;
  --info:    #5E8DBC;
  --info-bg: #DCE9F2;

  /* ---------- ROLE ALIASES (use these in product code) ---------- */
  --fg:        var(--night-800);   /* default text */
  --fg-muted:  var(--slate-500);
  --fg-subtle: var(--slate-400);
  --fg-onDark: #FFFFFF;
  --fg-onDark-muted: #B8C2D8;
  --bg:        var(--canvas);
  --bg-elevated: var(--surface);
  --brand:     var(--blue-400);    /* the logo blue */
  --brand-strong: var(--blue-700); /* for text/links on cream */
  --brand-ink: var(--night-800);
  --accent:    var(--coral-500);
  --accent-2:  var(--gold-500);
  --border:    var(--line);
  --focus-ring: var(--blue-400);

  /* ---------- SIGNATURE GRADIENTS (use sparingly) ---------- */
  /* Sunrise — energy, the spotlight moment. Heroes, CTAs, joy. */
  --grad-sunrise: linear-gradient(102deg, #FF6B7D 0%, #FF8A5C 46%, #FFB13C 100%);
  /* Dusk — calm, dreamy. The night sky the dream lives under. */
  --grad-dusk: linear-gradient(150deg, #16213A 0%, #2C3E63 58%, #5E8DBC 130%);
  /* Sky — soft brand-blue wash for light feature surfaces. */
  --grad-sky: linear-gradient(150deg, #81AACF 0%, #5E8DBC 100%);
  /* Spotlight — radial glow for dark sections (place behind content). */
  --grad-spotlight: radial-gradient(62% 82% at 50% 0%, rgba(255,177,60,0.20) 0%, rgba(255,107,125,0.10) 40%, rgba(22,33,58,0) 72%);

  /* ============================================================
     TYPOGRAPHY
     Display: MuseoModerno (brand)  | Body & UI: Hanken Grotesk
     Both self-hosted from /fonts (variable, roman + italic).
     ============================================================ */
  --font-display: "MuseoModerno", "Hanken Grotesk", system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — major-third-ish, tuned for hero + UI */
  --text-display: 4.5rem;   /* 72 — hero */
  --text-h1: 3.25rem;       /* 52 */
  --text-h2: 2.25rem;       /* 36 */
  --text-h3: 1.625rem;      /* 26 */
  --text-h4: 1.25rem;       /* 20 */
  --text-lg: 1.125rem;      /* 18 — lead paragraph */
  --text-base: 1rem;        /* 16 */
  --text-sm: 0.875rem;      /* 14 */
  --text-xs: 0.75rem;       /* 12 — labels, eyebrows */

  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.16em;   /* uppercase eyebrows */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extra: 800;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- RADII ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (cool, soft — like stage haze, never harsh) ---------- */
  --shadow-xs: 0 1px 2px rgba(14,26,58,0.06);
  --shadow-sm: 0 2px 8px rgba(14,26,58,0.07);
  --shadow-md: 0 8px 24px rgba(14,26,58,0.10);
  --shadow-lg: 0 18px 48px rgba(14,26,58,0.14);
  --shadow-glow-coral: 0 12px 36px rgba(255,92,114,0.34);
  --shadow-glow-blue: 0 12px 36px rgba(62,124,196,0.30);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   SEMANTIC TYPE CLASSES — apply directly in markup
   ============================================================ */
.de-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--coral-500);
}
.de-display {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.de-h1 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg); }
.de-h2 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h2); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg); }
.de-h3 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h3); line-height: var(--leading-snug); color: var(--fg); }
.de-h4 { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-h4); line-height: var(--leading-snug); color: var(--fg); }
.de-lead { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--fg-muted); }
.de-body { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg); }
.de-small { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-muted); }
.de-caption { font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg-subtle); }