/* Empire Studio — design tokens (from empire-studio.com, Sept 2026)
   Drop this file in the dashboard and use the variables directly. */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Domine:wght@400&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Backgrounds ---------- */
  --es-bg:            #0a0a0a;   /* 10 10 10  */
  --es-bg-section:    #0f0f0f;   /* 15 15 15  */
  --es-surface:       #141414;   /* 20 20 20  */
  --es-surface-2:     #161616;   /* 22 22 22  */
  --es-panel:         #0d0d12;   /* 13 13 18  */
  --es-glass:         linear-gradient(180deg, rgba(20,20,22,0.85) 0%, rgba(28,22,36,0.85) 100%);
  --es-glass-hover:   rgba(40,34,52,0.90);

  /* ---------- Text ---------- */
  --es-text:          #ffffff;
  --es-text-strong:   rgba(255,255,255,0.90);
  --es-text-body:     rgba(255,255,255,0.85);
  --es-text-para:     rgba(255,255,255,0.75);
  --es-text-muted:    rgba(255,255,255,0.70);
  --es-text-eyebrow:  rgba(255,255,255,0.60);
  --es-text-caption:  rgba(255,255,255,0.50);
  --es-text-hint:     rgba(255,255,255,0.45);
  --es-placeholder:   rgba(255,255,255,0.35);
  --es-text-on-white: #0a0a0a;

  /* ---------- Accent (one and only) ---------- */
  --es-gold:          #f5c542;   /* 245 197 66 */
  --es-gold-glow:     rgba(245,197,66,0.80);
  --es-gold-stroke:   rgba(245,197,66,0.22);
  --es-white:         #ffffff;
  --es-white-hover:   rgba(255,255,255,0.82);
  --es-success:       #3ddc84;   /* 61 220 132 — live/success dot only */

  /* ---------- Borders ---------- */
  --es-border-subtle: rgba(255,255,255,0.08);
  --es-border:        rgba(255,255,255,0.10);
  --es-border-input:  rgba(255,255,255,0.12);
  --es-border-strong: rgba(255,255,255,0.18);
  --es-border-ghost:  rgba(255,255,255,0.22);
  --es-border-focus:  rgba(255,255,255,0.45);

  /* ---------- Decorative ---------- */
  --es-filigree:      rgba(255,255,255,0.03);
  --es-glow-white:    rgba(255,255,255,0.20);
  --es-glow-violet:   rgba(130,130,255,0.14);

  /* ---------- Type ---------- */
  --es-font-display:  "Playfair Display", Georgia, serif;
  --es-font-numeric:  "Domine", Georgia, serif;
  --es-font-ui:       "Inter", system-ui, -apple-system, sans-serif;

  --es-fs-display:    64px;  --es-lh-display: 1.05; --es-ls-display: -0.02em;
  --es-fs-h2:         48px;  --es-lh-h2: 1.10;
  --es-fs-h3:         28px;  --es-lh-h3: 1.20;
  --es-fs-quote:      28px;  --es-lh-quote: 1.35;
  --es-fs-stat:       64px;  --es-lh-stat: 1;
  --es-fs-stat-sm:    40px;
  --es-fs-body:       18px;  --es-lh-body: 1.60;
  --es-fs-body-sm:    16px;  --es-lh-body-sm: 1.55;
  --es-fs-eyebrow:    13px;  --es-ls-eyebrow: 0.12em;
  --es-fs-nav:        15px;
  --es-fs-button:     15px;
  --es-fs-pill:       11px;  --es-ls-pill: 0.08em;
  --es-fs-caption:    12px;
  --es-fs-label:      13px;
  --es-fs-input:      15px;

  /* ---------- Radius ---------- */
  --es-r-xs: 4px; --es-r-sm: 8px; --es-r-md: 10px; --es-r-lg: 12px; --es-r-xl: 16px; --es-r-pill: 999px;

  /* ---------- Spacing ---------- */
  --es-section-y: 120px; --es-section-x: 40px;
  --es-container: 1080px; --es-container-narrow: 760px; --es-container-wide: 1120px;
  --es-gap-xs: 8px; --es-gap-sm: 14px; --es-gap-md: 16px; --es-gap-lg: 24px; --es-gap-xl: 48px; --es-gap-2xl: 64px;

  /* ---------- Shadows ---------- */
  --es-shadow-card:   0 20px 50px rgba(0,0,0,0.35);
  --es-shadow-photo:  0 16px 40px rgba(0,0,0,0.45);
  --es-shadow-object: 0 50px 110px rgba(0,0,0,0.80), 0 12px 30px rgba(0,0,0,0.50);
  --es-shadow-stage:  0 40px 90px rgba(0,0,0,0.65), 0 0 80px rgba(150,150,255,0.18);
  --es-shadow-gold:   0 0 10px rgba(245,197,66,0.80);

  /* ---------- Motion ---------- */
  --es-ease:          cubic-bezier(0.44, 0, 0.56, 1);
  --es-dur-fast:      0.2s;
  --es-dur:           0.25s;
}

@media (max-width: 1199px) {
  :root { --es-fs-display: 52px; --es-fs-h2: 42px; --es-fs-stat: 52px; --es-fs-body: 17px; --es-section-y: 90px; --es-section-x: 32px; }
}
@media (max-width: 809px) {
  :root { --es-fs-display: 40px; --es-fs-h2: 34px; --es-fs-stat: 48px; --es-fs-body: 16px; --es-fs-nav: 14px; --es-section-y: 64px; --es-section-x: 20px; }
}

/* ---------- Ready-made classes ---------- */
.es-page      { background: var(--es-bg); color: var(--es-text); font-family: var(--es-font-ui); -webkit-font-smoothing: antialiased; }
.es-display   { font: italic 700 var(--es-fs-display)/var(--es-lh-display) var(--es-font-display); letter-spacing: var(--es-ls-display); }
.es-h2        { font: 700 var(--es-fs-h2)/var(--es-lh-h2) var(--es-font-display); letter-spacing: -0.02em; }
.es-h3        { font: italic 700 var(--es-fs-h3)/var(--es-lh-h3) var(--es-font-display); letter-spacing: -0.02em; }
.es-quote     { font: italic 400 var(--es-fs-quote)/var(--es-lh-quote) var(--es-font-display); letter-spacing: -0.01em; }
.es-stat      { font: 400 var(--es-fs-stat)/var(--es-lh-stat) var(--es-font-numeric); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.es-body      { font: 400 var(--es-fs-body)/var(--es-lh-body) var(--es-font-ui); color: var(--es-text-para); }
.es-eyebrow   { font: 600 var(--es-fs-eyebrow)/1.2 var(--es-font-ui); letter-spacing: var(--es-ls-eyebrow); text-transform: uppercase; color: var(--es-text-eyebrow); }
.es-eyebrow--gold { color: var(--es-gold); }

.es-btn       { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--es-r-pill); background: var(--es-white); color: var(--es-text-on-white); font: 600 var(--es-fs-button)/1.2 var(--es-font-ui); border: 0; cursor: pointer; transition: background var(--es-dur-fast) var(--es-ease); }
.es-btn:hover { background: var(--es-white-hover); }
.es-btn--ghost{ background: transparent; color: var(--es-text); border: 1px solid var(--es-border-ghost); padding: 12px 18px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.es-btn--ghost:hover { background: rgba(255,255,255,0.08); }

.es-pill      { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: var(--es-r-pill); background: rgba(16,16,22,0.9); border: 1px solid rgba(255,255,255,0.14); font: 600 var(--es-fs-pill)/1.2 var(--es-font-ui); letter-spacing: var(--es-ls-pill); text-transform: uppercase; backdrop-filter: blur(12px); }
.es-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--es-gold); box-shadow: var(--es-shadow-gold); }

.es-card      { background: var(--es-glass); border: 1px solid var(--es-border-subtle); border-radius: var(--es-r-lg); padding: 24px 26px 26px; backdrop-filter: blur(10px); box-shadow: var(--es-shadow-card); transition: transform var(--es-dur) var(--es-ease), background var(--es-dur) var(--es-ease); }
.es-card:hover{ transform: translateY(-3px); background: var(--es-glass-hover); }
.es-card--solid { background: var(--es-surface); border-color: var(--es-border); border-radius: var(--es-r-xl); padding: 32px; backdrop-filter: none; }

.es-input     { width: 100%; padding: 14px 16px; border-radius: var(--es-r-md); background: var(--es-surface); border: 1px solid var(--es-border-input); color: var(--es-text); font: 400 var(--es-fs-input)/1.3 var(--es-font-ui); outline: 0; }
.es-input::placeholder { color: var(--es-placeholder); }
.es-input:focus { border-color: var(--es-border-focus); }
.es-label     { font: 500 var(--es-fs-label)/1.3 var(--es-font-ui); color: var(--es-text-body); }

.es-divider   { border: 0; border-top: 1px solid var(--es-border); }
.es-median    { color: var(--es-gold); font-family: var(--es-font-numeric); font-variant-numeric: tabular-nums; }