/* ============================================================
   CLOUDYCHEF — Brand override over Unioil tokens
   Keeps Unioil's structure, spacing, type, radii, shadows, motion.
   Swaps the primary hue from orange → warm terracotta clay.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,900&display=swap');

:root {
  /* ---------- CLOUDYCHEF PRIMARY (terracotta clay) ---------- */
  --cc-clay:        #C84A2E;
  --cc-clay-press:  #A23A21;
  --cc-clay-hover:  #D85B3F;
  --cc-clay-dark:   #8A2C16;
  --cc-clay-tint:   #FBE3D9;
  --cc-clay-tint2:  #FDF1EA;

  /* ---------- SECONDARY: deep ink (warm graphite) ---------- */
  --cc-ink:         #1A1815;
  --cc-ink-soft:    #2D2924;

  /* ---------- WARM NEUTRALS (paper / cream) ---------- */
  --cc-paper:       #FAF6F0;   /* App background — warm off-white */
  --cc-paper-2:     #F3EDE3;   /* Inset */
  --cc-cream:       #EFE6D6;   /* Surface tint */

  /* ---------- TRUST / SCORE PALETTE ---------- */
  --cc-verified:    #2F7A3C;   /* Verified visit, success */
  --cc-verified-tint: #E4F1E5;
  --cc-warn:        #C98A0E;   /* Caution / declining */
  --cc-warn-tint:   #F9EFD0;

  /* ---------- OVERRIDE UNIOIL → CLOUDYCHEF ---------- */
  --unioil-orange:       var(--cc-clay);
  --unioil-orange-press: var(--cc-clay-press);
  --unioil-orange-hover: var(--cc-clay-hover);
  --unioil-orange-dark:  var(--cc-clay-dark);
  --unioil-orange-tint:  var(--cc-clay-tint);
  --unioil-orange-tint2: var(--cc-clay-tint2);

  --bg-app:     var(--cc-paper);
  --bg-surface: #FFFFFF;
  --bg-raised:  #FFFFFF;
  --bg-inset:   var(--cc-paper-2);
  --bg-brand:   var(--cc-clay);

  --fg-1: var(--cc-ink);
  --fg-2: #4A463F;
  --fg-3: #6B6660;
  --fg-4: #9A958D;
  --fg-brand: var(--cc-clay);
  --fg-on-brand: #FFFFFF;
  --fg-link: var(--cc-clay-dark);

  --border-1: #E6DFD2;
  --border-2: #D3CABB;
  --border-strong: #2D2924;

  /* ---------- TYPOGRAPHY — keep Saira display, add editorial Fraunces option ---------- */
  --font-editorial: 'Fraunces', 'Georgia', serif;

  --shadow-brand: 0 8px 24px rgba(200, 74, 46, 0.28);
  --shadow-1: 0 1px 2px rgba(26, 24, 21, 0.06), 0 1px 1px rgba(26, 24, 21, 0.04);
  --shadow-2: 0 4px 12px rgba(26, 24, 21, 0.08), 0 1px 2px rgba(26, 24, 21, 0.04);
  --shadow-3: 0 12px 28px rgba(26, 24, 21, 0.12), 0 2px 6px rgba(26, 24, 21, 0.06);
  --shadow-4: 0 24px 56px rgba(26, 24, 21, 0.16), 0 4px 10px rgba(26, 24, 21, 0.06);
}

/* ---------- Base ---------- */
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg-app);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
button { font-family: inherit; }

/* ---------- Selection ---------- */
::selection { background: var(--cc-clay); color: #fff; }

/* ---------- Utility ---------- */
.cc-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.cc-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cc-clay-dark);
}

/* ---------- Headlines — keep Saira Condensed feel ---------- */
.cc-display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--cc-ink);
}
.cc-editorial {
  font-family: var(--font-editorial);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
}

/* ---------- Scrollbar (subtle, brand) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D3CABB; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #B8AE9C; }

/* ---------- Animations ---------- */
@keyframes cc-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }
.cc-fade-in { animation: cc-fade-in 320ms var(--ease-out) both; }
.cc-fade { animation: cc-fade 200ms var(--ease-out) both; }

/* ---------- Focus ring ---------- */
*:focus-visible {
  outline: 2px solid var(--cc-clay);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}