/* Crown Prince Hall — Webfonts
   Brand mark & display: Cinzel (deco roman capitals, echoes the gold venue signage)
   Editorial headings:   Playfair Display (high-contrast elegant serif)
   UI / body / labels:    Jost (geometric sans with art-deco proportions)
   Script accent:         Pinyon Script (the flowing gold word — "celebration", "Extraordinary")
   NOTE: Loaded from Google Fonts CDN as the closest available matches to the
   hand-set gold "Crown Prince Hall" signage & the script accents in the brand posts.
   Swap for licensed brand files if/when available. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&family=Jost:wght@300;400;500;600;700&family=Pinyon+Script&display=swap');
/* Crown Prince Hall — Color System
   Drawn directly from the venue: onyx walls, champagne-gold chandeliers & signage,
   red-carpet red, electric-blue accent lighting, ivory & warm wood. */
:root {
  /* ---- Onyx / neutrals (the dark stage everything sits on) ---- */
  --onyx-950: #08080A;   /* deepest black — page base */
  --onyx-900: #0C0C10;   /* primary background */
  --onyx-850: #121218;   /* raised surface */
  --onyx-800: #181820;   /* card surface */
  --onyx-700: #22222C;   /* hairline / elevated card */
  --onyx-600: #2E2E3A;   /* borders on dark */
  --onyx-500: #45454F;   /* muted strokes */
  --onyx-400: #6B6B76;   /* disabled text on dark */
  --onyx-300: #9A9AA4;   /* secondary text on dark */
  --onyx-200: #C7C7CE;   /* tertiary light text */

  /* ---- Champagne gold (the crown jewel — chandeliers, signage, stanchions) ---- */
  --gold-900: #6E5417;
  --gold-800: #8C6C22;
  --gold-700: #A9842E;
  --gold-600: #C29A3A;
  --gold-500: #D4AF37;   /* core brand gold */
  --gold-400: #E0C25E;
  --gold-300: #ECD489;
  --gold-200: #F4E5B4;
  --gold-100: #FBF4DC;

  /* ---- Red carpet (red rope, roses, gowns) ---- */
  --red-700: #8C0C20;
  --red-600: #A50E28;
  --red-500: #C8102E;    /* core red-carpet red */
  --red-400: #DB2D45;
  --red-300: #E85C6F;

  /* ---- Electric blue (neon strip lighting accent) ---- */
  --blue-700: #0A5BB5;
  --blue-600: #1379DD;
  --blue-500: #1E9BFF;   /* core neon blue */
  --blue-400: #54B4FF;
  --blue-300: #8ECEFF;
  --blue-glow: rgba(30, 155, 255, 0.55);

  /* ---- Ivory / cream (the SIGNATURE collateral surface — see brand posts) ---- */
  --cream-50:  #FBF7EF;  /* lightest cream */
  --cream-100: #F5EFE3;  /* core marketing background */
  --cream-200: #ECE3D2;  /* cream panel / divider */
  --cream-300: #E0D3BC;

  /* ---- Ivory / white (chair cushions, building, text) ---- */
  --ivory-50:  #FBFAF6;  /* primary light text */
  --ivory-100: #F4F1E8;  /* warm ivory */
  --ivory-200: #E7E2D4;

  /* ---- Warm wood (dance-floor context tone) ---- */
  --wood-500: #C9A37A;
  --wood-700: #9A754C;

  /* ============ SEMANTIC ALIASES ============ */
  /* Surfaces */
  --bg-base:        var(--onyx-950);
  --bg-page:        var(--onyx-900);
  --surface-raised: var(--onyx-850);
  --surface-card:   var(--onyx-800);
  --surface-elevated: var(--onyx-700);
  --surface-ivory:  var(--ivory-100);
  --surface-cream:  var(--cream-100);   /* signature marketing surface */

  /* Text */
  --text-primary:   var(--ivory-50);
  --text-secondary: var(--onyx-300);
  --text-tertiary:  var(--onyx-400);
  --text-on-gold:   var(--onyx-950);
  --text-on-light:  var(--onyx-900);
  --text-on-cream:  #241B10;            /* warm near-black for cream collateral */
  --text-gold:      var(--gold-500);
  --text-gold-deep: var(--gold-700);    /* gold ink on cream */

  /* Brand / accent */
  --brand-gold:     var(--gold-500);
  --brand-red:      var(--red-500);
  --accent-blue:    var(--blue-500);

  /* Lines & borders */
  --border-subtle:  var(--onyx-600);
  --border-hairline: rgba(212, 175, 55, 0.18);  /* faint gold hairline */
  --border-gold:    var(--gold-500);

  /* Status */
  --status-success: #3FA66A;
  --status-warning: var(--gold-400);
  --status-danger:  var(--red-500);
  --status-info:    var(--blue-500);
}
/* Crown Prince Hall — Typography
   Cinzel for the crown-jewel display & brand mark, Playfair for editorial serif,
   Jost for UI / body / all-caps labels. */
:root {
  /* Families */
  --font-display: 'Cinzel', 'Times New Roman', serif;         /* brand mark, hero numerals */
  --font-serif:   'Playfair Display', Georgia, serif;          /* editorial headings */
  --font-sans:    'Jost', 'Helvetica Neue', Arial, sans-serif; /* body, UI, labels */
  --font-script:  'Pinyon Script', 'Snell Roundhand', cursive;  /* flowing gold accent word */

  /* Weights */
  --fw-light: 300;     /* @kind font */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */
  --fw-black: 900;     /* @kind font */

  /* Type scale (1.25 major-third-ish, tuned) */
  --text-xs:   0.75rem;   /* 12px — micro labels */
  --text-sm:   0.875rem;  /* 14px — captions */
  --text-base: 1rem;      /* 16px — body */
  --text-lg:   1.125rem;  /* 18px — lead body */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  4rem;      /* 64px */
  --text-6xl:  5.5rem;    /* 88px — hero display */

  /* Line heights */
  --leading-tight: 1.08;    /* @kind other */
  --leading-snug: 1.25;     /* @kind other */
  --leading-normal: 1.55;   /* @kind other */
  --leading-relaxed: 1.7;   /* @kind other */

  /* Letter spacing — deco glamour leans on wide tracking for caps */
  --tracking-tightest: -0.02em;  /* @kind other */
  --tracking-tight: -0.01em;     /* @kind other */
  --tracking-normal: 0;          /* @kind other */
  --tracking-wide: 0.08em;       /* @kind other */
  --tracking-wider: 0.16em;      /* @kind other */
  --tracking-widest: 0.32em;     /* @kind other */ /* eyebrow / label caps */

  /* Semantic roles */
  --role-eyebrow-spacing: var(--tracking-widest);  /* @kind other */
}
/* Crown Prince Hall — Spacing, radii, layout */
:root {
  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 6rem;    /* 96 */
  --space-11: 8rem;    /* 128 */

  /* Radii — restrained; glamour reads through sharp + softly-rounded, not pill-everything */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Containers */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1360px;

  /* Hairline width */
  --line-thin: 1px;
  --line-rule: 2px;
}
/* Crown Prince Hall — Effects: shadows, glows, gradients, motion */
:root {
  /* Shadows — deep, theatrical drop on the onyx stage */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.6);
  --shadow-card: 0 18px 50px rgba(0,0,0,0.55);

  /* Gold glow — the chandelier shimmer used on hover/active accents */
  --glow-gold: 0 0 0 1px rgba(212,175,55,0.35), 0 8px 30px rgba(212,175,55,0.22);
  --glow-gold-strong: 0 0 24px rgba(212,175,55,0.45);
  /* Electric-blue neon glow — the strip lighting */
  --glow-blue: 0 0 18px rgba(30,155,255,0.55), 0 0 4px rgba(30,155,255,0.8);

  /* Gradients */
  --grad-gold: linear-gradient(135deg, #ECD489 0%, #D4AF37 45%, #A9842E 100%); /* @kind color */
  --grad-gold-soft: linear-gradient(180deg, #E0C25E 0%, #C29A3A 100%); /* @kind color */
  --grad-onyx: linear-gradient(180deg, #14141A 0%, #08080A 100%); /* @kind color */
  --grad-red-carpet: linear-gradient(180deg, #DB2D45 0%, #C8102E 60%, #8C0C20 100%); /* @kind color */
  /* Image protection scrim — for text over venue photos */
  --scrim-bottom: linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(8,8,10,0.55) 55%, rgba(8,8,10,0.92) 100%); /* @kind color */
  --scrim-full: linear-gradient(180deg, rgba(8,8,10,0.35) 0%, rgba(8,8,10,0.78) 100%); /* @kind color */

  /* Motion — refined, never bouncy. Slow fades & gentle lifts. */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur-base: 240ms;  /* @kind other */
  --dur-slow: 420ms;  /* @kind other */

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(30,155,255,0.5); /* @kind shadow */
}