/* =========================================================================
   Tomoca Coffee — artisanal heritage coffee theme
   Light (latte/cream/copper) + Dark (dark-roast/amber) via CSS variables.
   Type: Fraunces (display) + Inter (body). Soft-rounded, tactile, warm.
   ========================================================================= */

:root, :root.light {
  --background:               #f4ead9;
  --surface:                  #faf2e6;
  --surface-container:        #efe2cd;
  --surface-container-high:   #e7d6bd;
  --on-surface:               #2c1d11;
  --on-surface-variant:       #6a523d;
  --heading:                  #3a2415;
  --primary:                  #6b3f1d; /* roast brown (button fill) */
  --on-primary:               #fbf1e2;
  --accent:                   #b06a2c; /* copper-amber text accent */
  --accent-strong:            #c9852f; /* hover / decorative */
  --outline:                  #9c7d5f;
  --outline-variant:          #e0cdb2;
  --error:                    #b3261e;
  --hero-overlay:             linear-gradient(180deg, rgba(34,20,10,0.30), rgba(34,20,10,0.72));
  --grain-opacity:            0.05;
}

:root.dark {
  --background:               #18100a;
  --surface:                  #18100a;
  --surface-container:        #241910;
  --surface-container-high:   #2e2114;
  --on-surface:               #efe1cf;
  --on-surface-variant:       #c2a888;
  --heading:                  #f3e6d4;
  --primary:                  #c9852f; /* amber fill on dark */
  --on-primary:               #2a1809;
  --accent:                   #e0a558;
  --accent-strong:            #ecb368;
  --outline:                  #9c7d5f;
  --outline-variant:          #3d2c1c;
  --error:                    #ffb4ab;
  --hero-overlay:             linear-gradient(180deg, rgba(12,7,3,0.45), rgba(12,7,3,0.80));
  --grain-opacity:            0.07;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--background);
  color: var(--on-surface);
  font-family: "Inter", system-ui, sans-serif;
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}
.font-display { font-family: "Fraunces", Georgia, serif; }
.label { font-family: "Inter", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; line-height: 1; }

/* texture + decoration */
.grain { position: relative; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
}
.hero-overlay { background: var(--hero-overlay); }
.ring-soft { border: 1px solid var(--outline-variant); }

/* buttons */
.btn-primary { background: var(--primary); color: var(--on-primary); border-radius: 9999px; transition: filter .25s ease, transform .1s ease; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: scale(.97); }
.btn-outline { border: 1px solid var(--accent); color: var(--accent); border-radius: 9999px; transition: background-color .3s ease, color .3s ease; }
.btn-outline:hover { background: var(--accent); color: var(--on-primary); }
.btn-ghost-light { border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 9999px; transition: background-color .3s ease; }
.btn-ghost-light:hover { background: rgba(255,255,255,.14); }

/* inputs */
.field {
  width: 100%; background: var(--surface); border: 1px solid var(--outline-variant);
  border-radius: 10px; padding: .7rem .9rem; color: var(--on-surface);
  font-family: "Inter", sans-serif; outline: none; transition: border-color .25s ease;
}
.field::placeholder { color: var(--on-surface-variant); opacity: .7; }
.field:focus { border-color: var(--accent); }
.field option { color: #2c1d11; }

/* nav + cards */
#site-nav { background: color-mix(in srgb, var(--surface) 88%, transparent); }
.nav-scrolled { box-shadow: 0 1px 0 var(--outline-variant), 0 10px 30px rgba(0,0,0,.10); }
.card { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: 16px; }

/* language menu + reveal */
.lang-menu[hidden] { display: none; }
.lang-option .material-symbols-outlined { opacity: 0; transition: opacity .15s ease; }
.lang-option[aria-current="true"] .material-symbols-outlined { opacity: 1; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }

html.capture #home { min-height: 0 !important; height: auto !important; }
html.capture .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; opacity: 1; transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}