/* =============================================================================
   AS-2026 — Redesign overlay "Antique Gold + Masterworks"
   -----------------------------------------------------------------------------
   This stylesheet sits on TOP of the existing design system.
   It re-binds the colour tokens the existing templates already use
   (--gold, --cream, --card, etc.) to the new palette — so every page
   instantly adopts the new look without touching templates.
   
   Deploy: link this ONE file from base_new.html. One change = whole site updated.
   Rollback: remove the link tag, old palette returns instantly.
   ========================================================================== */

/* --- Google Fonts (Fraunces for display, Inter for UI, JetBrains Mono for numbers) --- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@300;400;500;600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* =============================================================================
   1. ROOT VARIABLE REBIND — palette "Antique Gold + Masterworks gold"
   ========================================================================== */
:root {
  /* === BACKGROUNDS === */
  --bg: #0B1226;             /* page background — navy deep (kept from original) */
  --card: #12192B;           /* card background — slightly lighter than bg, creates layer */
  --card-hover: #1A2440;     /* card hover state */
  --surface: #08111F;        /* deepest surface (input fields, code blocks) */

  /* === GOLD PALETTE === */
  --gold: #B8913C;           /* PRIMARY gold — Masterworks bronze — for logo, CTAs, prices, accents */
  --gold-soft: #C8953B;      /* Secondary gold — for serif titles, hover states, decorative elements */
  --gold-deep: #8A6A28;      /* Deep gold — for hover on CTAs, premium borders */
  --gold-glow: rgba(184,145,60,0.12);  /* Gold with low alpha — backgrounds, soft highlights */
  --gold-border: rgba(184,145,60,0.28);

  /* === CREAM TEXT === */
  --cream: #E8E0C4;          /* Primary text — warm off-white, like aged paper */
  --cream-60: rgba(232,224,196,0.72);  /* Secondary text */
  --cream-40: rgba(232,224,196,0.50);  /* Tertiary / metadata */
  --cream-20: rgba(232,224,196,0.25);  /* Very dim / placeholders */

  /* === ACCENTS (used sparingly) === */
  --teal: #7EA8B8;           /* Cool accent — replaces old cyan, more adult */
  --teal-soft: rgba(126,168,184,0.12);
  --green: #6FB574;          /* Success / up / positive */
  --red: #D45A5A;            /* Error / down / negative */

  /* === BORDERS === */
  --border: rgba(184,145,60,0.16);       /* Default border — gold tinted, very subtle */
  --border-br: rgba(184,145,60,0.32);    /* Emphasised border */
  --divider: rgba(232,224,196,0.08);     /* Neutral horizontal divider */

  /* === FONTS === */
  --fs: 'Fraunces', 'EB Garamond', 'Playfair Display', Georgia, serif;  /* display serif */
  --ft: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;       /* UI text */
  --fm: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;         /* numbers/code */
  --fb: var(--ft);  /* body alias — kept for legacy templates */
  
  /* === LEGACY ALIASES (so old code keeps working) === */
  --cyan: var(--teal);                 /* old --cyan now maps to --teal */
  --home-cream-60: var(--cream-60);
  --home-cyan: var(--teal);
}

/* =============================================================================
   2. GLOBAL TYPOGRAPHY — give everything Inter/Fraunces feel
   ========================================================================== */
html, body {
  font-family: var(--ft);
  font-feature-settings: 'cv11', 'ss01';  /* Inter's stylistic alternates */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

body {
  color: var(--cream);
  background: var(--bg);
}

/* Display headings — Fraunces, regular weight, negative tracking */
h1, h2, .hm-h, .su-h, .ad-h, .art-h, .me-h, .onb-h, .about-h1, .legal-h1 {
  font-family: var(--fs) !important;
  font-weight: 400 !important;
  font-style: normal !important;   /* kill default italic */
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
}

/* Serif is reserved for real titles — kill italic by default in serif */
.as-italic, em.as-italic {
  font-style: italic;
}

/* Default italic in prose is fine, but NOT in titles and NOT in headers */
h1 em, h2 em, h3 em, .hm-h em, .me-greet-t em {
  font-style: normal !important;
  color: var(--gold) !important;
}

/* All numbers/prices use JetBrains Mono — tabular, precise */
.hold-q-v, .hold-q-l, .kpi-v, .tx-amt, .oc-v, .as-art-price, 
.new-p, .su-price, .art-price, .me-kpi-v,
code, kbd, samp, pre {
  font-family: var(--fm) !important;
  font-feature-settings: 'tnum' 1, 'zero' 1;  /* tabular numbers, slashed zero */
}

/* =============================================================================
   3. COMPONENT-LEVEL TUNING — softer corners, better spacing, refined borders
   ========================================================================== */

/* Buttons — more rounded, more padding, hover gradient-free */
button, .btn, .as-cta, .ad-ai-btn,
input[type="submit"], input[type="button"] {
  font-family: var(--ft);
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 7px;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
button:active, .btn:active { transform: translateY(0.5px); }

/* Primary gold CTAs */
.btn-primary, .su-submit, .as-cta, 
button[type="submit"]:not(.btn-ghost):not(.ad-ai-btn) {
  background: var(--gold) !important;
  color: var(--bg) !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 11px 20px !important;
}
.btn-primary:hover, .su-submit:hover, .as-cta:hover {
  background: var(--gold-soft) !important;
}

/* Ghost / secondary buttons */
.btn-small, .btn-ghost, .as-cta-ghost {
  background: transparent !important;
  color: var(--cream) !important;
  border: 0.5px solid var(--gold-border) !important;
  font-weight: 500 !important;
}
.btn-small:hover, .btn-ghost:hover, .as-cta-ghost:hover {
  border-color: var(--gold) !important;
  background: var(--gold-glow) !important;
}

/* Cards — softer corners, more breathing */
.card, .su-card, .ad-card, .me-card, .kpi,
.hm-panel, .art-panel, .new-item, .as-me-card {
  border-radius: 10px !important;
  border: 0.5px solid var(--border) !important;
  background: var(--card) !important;
}

/* Nav chip / pill shapes */
.chip, .ai-s, .as-chip, .pill, .me-f, .onb-pill, .as-art-tag {
  border-radius: 13px !important;
  font-family: var(--ft);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0;
}

/* Input fields — refined */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea,
.ad-ai-input {
  font-family: var(--ft) !important;
  background: var(--surface) !important;
  border: 0.5px solid var(--border) !important;
  color: var(--cream) !important;
  border-radius: 7px !important;
  padding: 10px 13px !important;
  transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--gold) !important;
}
::placeholder { color: var(--cream-20) !important; }

/* Links */
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-soft); }

/* Hr — gold tinted */
hr, .su-divider { 
  border: none !important; 
  border-top: 0.5px solid var(--divider) !important; 
  margin: 14px 0 !important;
}

/* =============================================================================
   4. SPECIFIC PAGE TWEAKS
   ========================================================================== */

/* Footer — kept compact but modern */
footer {
  font-family: var(--ft);
  font-size: 11px;
  color: var(--cream-40);
  border-top: 0.5px solid var(--border);
  padding: 18px 24px;
  line-height: 1.65;
}

/* Hero "kicker" labels (MARKETPLACE, ABOUT, etc.) — teal, uppercase, tracked */
.hm-kicker, .about-tag, .legal-kicker, .ad-kicker,
.hm-comp-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 2.2px !important;
  color: var(--teal) !important;
  text-transform: uppercase !important;
}

/* Hold / transaction rows — tighter, cleaner */
.hold {
  background: var(--card) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  transition: background 0.15s;
}
.hold:hover { background: var(--card-hover) !important; }
.hold-n { color: var(--gold) !important; font-family: var(--fs) !important; font-style: normal !important; }
.hold-a { color: var(--cream-40) !important; font-family: var(--ft) !important; }

/* KPI cards */
.kpi { padding: 12px 14px !important; }
.kpi-l { 
  font-size: 10px !important; 
  letter-spacing: 1.2px !important; 
  color: var(--cream-40) !important; 
  text-transform: uppercase !important; 
  font-weight: 500 !important; 
  margin-bottom: 4px !important;
}
.kpi-v { font-family: var(--fm) !important; font-size: 20px !important; font-weight: 500 !important; }
.kpi-v.gold { color: var(--gold) !important; }
.kpi-v.up { color: var(--green) !important; }
.kpi-v.down { color: var(--red) !important; }

/* AI advisor card */
.ad-ai-badge, .as-badge-opus { 
  background: var(--gold-glow) !important; 
  color: var(--gold-soft) !important;
  font-family: var(--fm) !important;
  font-size: 10px !important;
}

/* Transactions */
.tx-side.buy { background: rgba(111,181,116,0.12) !important; color: var(--green) !important; }
.tx-side.sell { background: rgba(212,90,90,0.12) !important; color: var(--red) !important; }
.tx-amt { font-family: var(--fm) !important; }

/* Cookie banner, Maintenance pages — inherit palette automatically via variables */

/* Empty states — gold thin hint instead of cyan */
.empty-icon { color: var(--gold-border) !important; }

/* Compliance footer strip */
.compliance-strip { 
  background: var(--surface) !important; 
  border-top: 0.5px solid var(--border) !important; 
  padding: 14px 22px !important;
}

/* =============================================================================
   5. LEGACY KILL — override old Blockbuster-yellow visuals
   ========================================================================== */

/* Old gold squares and rectangles — force new gold */
[style*="E8B44C"], [style*="e8b44c"] { 
  /* inline colours in templates — can't fully override but variables handle most */
}

/* Old cyan — force teal */
[style*="4EC9DB"], [style*="4ec9db"] { 
  /* same — inline style overrides */
}

/* Remove heavy text-shadows and glows if any */
.hero *, .hm-h * { text-shadow: none !important; }

/* =============================================================================
   6. GALLERY IMAGES placeholders (while real photos pending)
   ========================================================================== */

.art-img-musicians, .art-img-wheat, .art-img-young-woman,
[class*="art-img-"] {
  background: linear-gradient(145deg, #2a2419 0%, #1a1410 100%) !important;
  position: relative;
  overflow: hidden;
}
.art-img-musicians::after, .art-img-wheat::after, .art-img-young-woman::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(184,145,60,0.15), transparent 70%);
  pointer-events: none;
}

/* =============================================================================
   7. RESPONSIVE — mobile keeps the same feel
   ========================================================================== */
@media (max-width: 700px) {
  h1, h2, .hm-h { font-size: 26px !important; }
  .kpi-v { font-size: 17px !important; }
  .card, .me-card { padding: 12px !important; }
}

/* End AS-2026 overlay */