/*
 * rifix-theme.css — Shared design system for all Rifix tool pages
 * Replaces the per-page Space Grotesk + blue system and the
 * 'Topbar gold rebrand' !important hack block.
 *
 * Load this AFTER the page's own <style> block so these vars win.
 * The page's own :root block (--bg, --s1, --s2, --border…) stays
 * untouched — this file only resets the brand-level tokens.
 */

/* ── Brand tokens (override tool-page :root) ── */
:root {
  /* Typography */
  --font:  'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --mono:  'DM Mono', 'SF Mono', monospace;

  /* Gold accent system (light mode) */
  --accent:    #836720;
  --accent-h:  #c9a84c;
  --gold:      #836720;
  --gold-light:#c9a84c;
  --gold-dim:  rgba(131,103,32,0.12);
  --gold-glow: rgba(131,103,32,0.07);
  --overlay:   rgba(131,103,32,0.12);

  /* Supporting palette (light) */
  --teal:   #2a9585;
  --rose:   #c45555;
  --green:  #2a9585;   /* maps tool --green to brand teal */
  --red:    #c45555;

  /* Radii */
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
}

body.dark {
  --accent:   #c9a84c;
  --accent-h: #e4c870;
  --gold:     #c9a84c;
  --gold-light:#e4c870;
  --gold-dim:  rgba(201,168,76,0.12);
  --gold-glow: rgba(201,168,76,0.07);
  --overlay:   rgba(201,168,76,0.12);
  --teal:   #4ec9b8;
  --rose:   #e87d7d;
  --green:  #4ec9b8;
}

/* ── Body: warm cream background (light) / true dark (dark) ── */
body {
  font-family: var(--font);
}
/* Override the cool-grey --bg that tool pages set */
body:not(.dark) {
  background: #f8f6f2;
}
body.dark {
  background: #0d0d0f;
}

/* ── Topbar: dark glass on both modes ── */
.rifix-topbar,
[data-rifix-topbar] {
  background: rgba(8,8,8,0.93) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* ── Logo wordmark: always Cormorant Garamond ── */
.rifix-logo-link span,
.logo,
.nav-logo-name {
  font-family: var(--serif) !important;
}

/* ── Primary buttons → gold ── */
.top-btn.primary,
button.primary,
.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #070707 !important;
}
.top-btn.primary:hover,
button.primary:hover,
.btn-primary:hover {
  background: var(--accent-h) !important;
  border-color: var(--accent-h) !important;
}

/* Success buttons → brand teal */
.top-btn.success,
button.success {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #07201d !important;
}

/* ── Accent colour on interactive elements ── */
input[type="range"]::-webkit-slider-thumb { background: var(--gold) !important; }
input[type="range"]::-moz-range-thumb      { background: var(--gold) !important; }
input[type="range"]::-webkit-slider-runnable-track { accent-color: var(--gold); }
input[type="checkbox"]:checked,
input[type="radio"]:checked { accent-color: var(--gold); }

/* Active toolbar / mode buttons */
.toolbar-btn.active,
.mode-btn.active,
.panel-tab.active {
  background: rgba(131,103,32,0.12) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}
body.dark .toolbar-btn.active,
body.dark .mode-btn.active,
body.dark .panel-tab.active {
  background: rgba(201,168,76,0.12) !important;
}

/* Selected layer items */
.layer-item.active {
  background: var(--gold-dim) !important;
  border-color: var(--gold) !important;
}

/* Focus ring on inputs */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-dim) !important;
}

/* ── Scrollbar: dark, minimal ── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a26; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a35; }

/* ── Tool page card: warm cream card on light, dark card on dark ── */
.tool-page-wrap {
  background: #f8f6f2;
}
body.dark .tool-page-wrap {
  background: #0d0d0f;
}

.tool-page-card {
  /* Slightly warmer shadow */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.04));
}

/* ── Section cards inside tool-page-card ── */
body:not(.dark) .tool-page-card > div[style*="background:var(--s1)"],
body:not(.dark) .tool-page-card > div[style*="background: var(--s1)"] {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* ── Tool page title: use serif display weight ── */
.tool-page-title {
  font-family: var(--serif) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
}

/* ── Step labels / monospace labels ── */
[style*="font-family:var(--mono)"],
[style*="font-family: var(--mono)"] {
  font-family: var(--mono) !important;
}

/* ── Mobile FAB (from rifix-mobile.js) inherits brand colours ── */
.rmob-fab-btn.primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #070707 !important;
}
.rmob-fab-btn.success {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #07201d !important;
}