/* shared.css — ChezaChess Design System */

:root {
  --gold: #C9A84C;
  --gold-light: #E8C97A;
  --gold-pale: #F5E4A8;
  --gold-dark: #8B6914;
  --gold-faint: rgba(201,168,76,0.12);
  --transition-theme: background 0.4s, color 0.4s, border-color 0.4s;
}

[data-theme="dark"] {
  --bg: #0A0A0A; --bg-mid: #111111; --bg-soft: #1A1A1A; --bg-card: #111111;
  --fg: #F9F5EE; --fg-dim: #D8D0C0; --fg-faint: rgba(216,208,192,0.35);
  --border: rgba(201,168,76,0.15); --nav-bg: rgba(10,10,10,0.88);
  --shadow: 0 4px 40px rgba(0,0,0,0.6);
  --sq-light-bg: rgba(245,228,168,0.82); --sq-dark-bg: #1A1A1A;
}

[data-theme="light"] {
  --bg: #F8F5EF; --bg-mid: #FFFFFF; --bg-soft: #EDE8DF; --bg-card: #FFFFFF;
  --fg: #1A1208; --fg-dim: #4A3F28; --fg-faint: rgba(74,63,40,0.4);
  --border: rgba(139,105,20,0.2); --nav-bg: rgba(248,245,239,0.94);
  --shadow: 0 4px 40px rgba(0,0,0,0.08);
  --sq-light-bg: rgba(245,228,168,0.9); --sq-dark-bg: #8B6914;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--fg);
  font-family:'Cormorant Garamond',serif;
  overflow-x:hidden; transition:var(--transition-theme); min-height:100vh;
}
body::before {
  content:''; position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none; z-index:999; opacity:0.22;
}

@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes scrollPulse { 0%,100%{opacity:.4} 50%{opacity:1} }
.anim { opacity:0; transform:translateY(22px); transition:opacity .7s,transform .7s; }
.anim.visible { opacity:1; transform:translateY(0); }

.section-eyebrow { font-family:'Montserrat',sans-serif; font-size:.62rem; letter-spacing:.35em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; }
.section-title { font-family:'Playfair Display',serif; font-size:clamp(2rem,3.5vw,3rem); font-weight:700; color:var(--fg); line-height:1.2; transition:color .4s; }
.section-title em { color:var(--gold); font-style:italic; }
.section-divider { width:60px; height:1px; background:linear-gradient(to right,transparent,var(--gold),transparent); margin:1.5rem auto 0; }
.section-header { text-align:center; margin-bottom:4rem; }

/* NAV */
nav#main-nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 3.5rem; border-bottom:1px solid var(--border);
  background:var(--nav-bg); backdrop-filter:blur(14px);
  transition:var(--transition-theme),padding .3s;
}
nav#main-nav.scrolled { padding:1rem 3.5rem; }
.nav-logo { font-family:'Cinzel',serif; font-size:1.3rem; font-weight:900; color:var(--gold); letter-spacing:.12em; text-decoration:none; }
.nav-logo span { color:var(--fg); transition:color .4s; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { font-family:'Montserrat',sans-serif; font-size:.65rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-dim); text-decoration:none; transition:color .25s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1px; background:var(--gold); transition:width .3s; }
.nav-links a:hover,.nav-links a.active { color:var(--gold); }
.nav-links a:hover::after,.nav-links a.active::after { width:100%; }
.nav-right { display:flex; align-items:center; gap:.8rem; }
.theme-toggle { width:40px; height:22px; background:var(--bg-soft); border:1px solid var(--border); border-radius:11px; position:relative; cursor:pointer; transition:background .3s,border-color .3s; flex-shrink:0; outline:none; }
.theme-toggle::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--gold); transition:transform .3s; }
[data-theme="light"] .theme-toggle::after { transform:translateX(18px); }
.theme-icon { font-size:.7rem; position:absolute; top:50%; transform:translateY(-50%); pointer-events:none; }
.theme-icon.sun { right:4px; }
.theme-icon.moon { left:4px; }
.nav-btn { font-family:'Montserrat',sans-serif; font-size:.65rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; padding:.55rem 1.3rem; cursor:pointer; border:none; transition:all .25s; white-space:nowrap; }
.nav-btn.outline { color:var(--gold); background:transparent; border:1px solid rgba(201,168,76,.4); }
.nav-btn.outline:hover { border-color:var(--gold); background:rgba(201,168,76,.06); }
.nav-btn.filled { color:#0A0A0A; background:var(--gold); }
.nav-btn.filled:hover { background:var(--gold-light); }
.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; }
.burger span { display:block; width:22px; height:1.5px; background:var(--fg); transition:all .3s; }
.burger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
#mobileMenu { display:none; position:fixed; top:64px; left:0; right:0; background:var(--nav-bg); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); padding:1.5rem 2rem; z-index:199; flex-direction:column; gap:1rem; }
#mobileMenu.open { display:flex; }
#mobileMenu a { font-family:'Montserrat',sans-serif; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); text-decoration:none; padding:.5rem 0; border-bottom:1px solid var(--border); transition:color .25s; }
#mobileMenu a:hover { color:var(--gold); }
#mobileMenu .mob-btns { display:flex; gap:.8rem; margin-top:.5rem; flex-wrap:wrap; }

/* PAGE HERO */
.page-hero { position:relative; padding:9rem 6rem 5rem; overflow:hidden; background:var(--bg); transition:background .4s; }
.page-hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(to right,transparent,var(--gold),transparent); opacity:.25; }
.page-hero-eyebrow { font-family:'Montserrat',sans-serif; font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; display:flex; align-items:center; gap:1rem; }
.page-hero-eyebrow::before { content:''; display:inline-block; width:2rem; height:1px; background:var(--gold); }
.page-hero-title { font-family:'Playfair Display',serif; font-size:clamp(3rem,6vw,5.5rem); font-weight:900; line-height:1.0; color:var(--fg); transition:color .4s; }
.page-hero-title em { color:var(--gold); font-style:italic; }
.page-hero-sub { font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:300; line-height:1.8; color:var(--fg-dim); max-width:520px; margin-top:1rem; transition:color .4s; }

/* BUTTONS */
.btn-primary { font-family:'Montserrat',sans-serif; font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:#0A0A0A; background:var(--gold); padding:1rem 2.5rem; text-decoration:none; border:none; cursor:pointer; transition:background .3s; position:relative; overflow:hidden; display:inline-block; }
.btn-primary::after { content:''; position:absolute; inset:0; background:var(--gold-light); transform:translateX(-100%); transition:transform .3s; }
.btn-primary:hover::after { transform:translateX(0); }
.btn-primary span { position:relative; z-index:1; }
.btn-ghost { font-family:'Montserrat',sans-serif; font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); background:transparent; padding:1rem 2.5rem; text-decoration:none; border:1px solid rgba(201,168,76,.4); cursor:pointer; transition:all .3s; display:inline-block; }
.btn-ghost:hover { border-color:var(--gold); background:rgba(201,168,76,.06); }
.btn-dark { font-family:'Montserrat',sans-serif; font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); background:#0A0A0A; padding:1.1rem 3rem; text-decoration:none; border:none; cursor:pointer; white-space:nowrap; transition:background .25s; display:inline-block; }
.btn-dark:hover { background:#1A1A1A; }

/* FORM */
.form-group { margin-bottom:1.5rem; }
.form-label { font-family:'Montserrat',sans-serif; font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--fg-dim); display:block; margin-bottom:.5rem; transition:color .4s; }
.form-input,.form-textarea,.form-select { width:100%; background:var(--bg-soft); border:1px solid var(--border); color:var(--fg); font-family:'Cormorant Garamond',serif; font-size:1rem; padding:.85rem 1rem; outline:none; transition:border-color .3s,background .4s,color .4s; -webkit-appearance:none; }
.form-input:focus,.form-textarea:focus,.form-select:focus { border-color:var(--gold); }
.form-textarea { resize:vertical; min-height:140px; }

/* FOOTER */
footer#main-footer { background:var(--bg); border-top:1px solid var(--border); padding:4rem 6rem 2rem; transition:background .4s; }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-logo-mark { font-family:'Cinzel',serif; font-size:1.1rem; font-weight:900; color:var(--gold); letter-spacing:.12em; text-decoration:none; }
.footer-logo-mark span { color:var(--fg); transition:color .4s; }
.footer-brand p { font-family:'Cormorant Garamond',serif; font-size:.95rem; font-weight:300; line-height:1.7; color:var(--fg-dim); margin-top:.8rem; max-width:260px; transition:color .4s; }
.footer-col-title { font-family:'Montserrat',sans-serif; font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.footer-col-links { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer-col-links a { font-family:'Montserrat',sans-serif; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim); text-decoration:none; transition:color .25s; }
.footer-col-links a:hover { color:var(--gold); }
.footer-bottom { border-top:1px solid var(--border); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; }
.footer-copy { font-family:'Montserrat',sans-serif; font-size:.58rem; letter-spacing:.1em; color:var(--fg-faint); transition:color .4s; }
.footer-domain { font-family:'Montserrat',sans-serif; font-size:.58rem; letter-spacing:.15em; color:var(--gold); opacity:.7; }

@media (max-width:900px) {
  nav#main-nav { padding:1.2rem 1.5rem; }
  .nav-links { display:none; }
  .nav-right .nav-btn { display:none; }
  .burger { display:flex; }
  .page-hero { padding:7rem 2rem 3rem; }
  footer#main-footer { padding:3rem 2rem 1.5rem; }
  .footer-top { grid-template-columns:1fr 1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; gap:.8rem; text-align:center; }
}
@media (max-width:600px) {
  .footer-top { grid-template-columns:1fr; }
}