/* Shared design tokens + base element styles for the Cigaréa site — the "cedar
   humidor" palette and type system. Used by every page (index.html, admin.html).
   Requires fonts.css to be loaded first (or alongside). */

:root{
  --ground:#F4EEE1;
  --ground-raised:#EAE0CB;
  --ground-sunken:#E1D5B8;
  --ink:#241A13;
  --ink-soft:#4B3B2C;
  --gold:#96723A;
  --gold-strong:#7C5C2C;
  --ember:#7A2621;
  --ember-strong:#5E1B17;
  --emerald:#16382C;
  --line:rgba(36,26,19,0.16);
  --line-strong:rgba(36,26,19,0.32);
  --shadow:0 30px 60px -30px rgba(36,26,19,0.35);
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#17110D;
    --ground-raised:#241A13;
    --ground-sunken:#0F0B08;
    --ink:#EDE2CE;
    --ink-soft:#C9B99C;
    --gold:#C6A15B;
    --gold-strong:#E0C079;
    --ember:#8C2F2A;
    --ember-strong:#B23F38;
    --emerald:#2E6B52;
    --line:rgba(237,226,206,0.14);
    --line-strong:rgba(237,226,206,0.28);
    --shadow:0 40px 80px -30px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --ground:#17110D;
  --ground-raised:#241A13;
  --ground-sunken:#0F0B08;
  --ink:#EDE2CE;
  --ink-soft:#C9B99C;
  --gold:#C6A15B;
  --gold-strong:#E0C079;
  --ember:#8C2F2A;
  --ember-strong:#B23F38;
  --emerald:#2E6B52;
  --line:rgba(237,226,206,0.14);
  --line-strong:rgba(237,226,206,0.28);
  --shadow:0 40px 80px -30px rgba(0,0,0,0.6);
}
:root[data-theme="light"]{
  --ground:#F4EEE1;
  --ground-raised:#EAE0CB;
  --ground-sunken:#E1D5B8;
  --ink:#241A13;
  --ink-soft:#4B3B2C;
  --gold:#96723A;
  --gold-strong:#7C5C2C;
  --ember:#7A2621;
  --ember-strong:#5E1B17;
  --emerald:#16382C;
  --line:rgba(36,26,19,0.16);
  --line-strong:rgba(36,26,19,0.32);
  --shadow:0 30px 60px -30px rgba(36,26,19,0.35);
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:'Crimson Pro',Georgia,'Times New Roman',serif;
  font-size:17px;
  line-height:1.7;
  transition:background .4s ease,color .4s ease;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
.container{
  max-width:1180px;
  margin:0 auto;
  padding-inline:clamp(20px,5vw,56px);
}
h1,h2,h3{
  font-family:'Bodoni Moda',Didot,'Times New Roman',serif;
  font-weight:500;
  margin:0;
  text-wrap:balance;
  letter-spacing:0.01em;
}
.eyebrow{
  font-family:'Cutive Mono',ui-monospace,monospace;
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:0.7em;
}
.eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:var(--gold);
  display:inline-block;
}
.mono{
  font-family:'Cutive Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
}
.rule{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 15%,var(--line-strong) 85%,transparent);
  border:0;
  margin:0;
}
::selection{background:var(--ember);color:var(--ground);}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.theme-toggle{
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink);
  font-family:'Cutive Mono',monospace;
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:0.5em 0.8em;
  cursor:pointer;
  transition:border-color .25s ease,color .25s ease;
}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold);}

.btn{
  font-family:'Cutive Mono',monospace;
  font-size:0.76rem;letter-spacing:0.12em;text-transform:uppercase;
  text-decoration:none;
  padding:1em 1.8em;
  border:1px solid var(--gold);
  display:inline-flex;align-items:center;gap:0.6em;
  cursor:pointer;
  background:transparent;
  color:var(--ink);
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease,color .3s ease;
}
.btn-primary{background:var(--ember);border-color:var(--ember);color:var(--ground);}
.btn-primary:hover{
  box-shadow:0 0 0 1px var(--ember-strong),0 0 34px 4px color-mix(in srgb, var(--ember) 55%, transparent);
  transform:translateY(-2px);
}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--gold);color:var(--ground-sunken);transform:translateY(-2px);}
.btn:disabled{opacity:0.5;cursor:default;transform:none;box-shadow:none;}
@media (prefers-reduced-motion:reduce){ .btn{transition:none;} .btn:hover{transform:none;} }