/* ═══════════════════════════════════════════════════════════
   Alkoraa shared theme — single source of truth for tokens,
   base styles, header, and buttons. Linked by BOTH index.html
   (landing) and app.html (dApp).

   Style-lock: Elegant / editorial (see .tastemaker/style-lock.md).
   Warm paper · deep pine · deep ochre. Gloock display + Inter body
   + JetBrains Mono for on-chain numbers. Single light mode.
   All pairings verified WCAG AA.
   ═══════════════════════════════════════════════════════════ */

/* ─── Font fallback metrics (kill CLS on font swap) ─── */
@font-face { font-family:"Gloock Fallback"; src:local("Georgia"); size-adjust:100%; ascent-override:92%; descent-override:24%; line-gap-override:0%; }
@font-face { font-family:"Inter Fallback";  src:local("Arial");   size-adjust:107%; ascent-override:90%; descent-override:22%; line-gap-override:0%; }

/* ─── Reset ─── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

/* ─── Tokens (the locked color contract) ─── */
:root{
  /* brand — deep pine (money/trust, never crypto purple) */
  --primary:        #1E5B41;
  --primary-strong: #17492F;
  --primary-hover:  #17492F;
  --primary-soft:   #DCE7DF;   /* pale sage fill — chips/soft states */
  --primary-bg:     rgba(30,91,65,0.06);
  --glow:           rgba(30,91,65,0.14);

  /* accent — deep ochre (links, numbers, editorial pops; AA as text) */
  --accent:         #9A5D12;
  --accent-strong:  #7F4C0E;
  --accent-soft:    #F0E7D2;

  /* status — soft sage, used ONLY for live/gasless/complete state */
  --mint:      #1E5B41;        /* status text (kept name for app compat) */
  --mint-soft: #DBE6DA;        /* status fill */
  --mint-ink:  #1E5B41;

  /* surfaces — warm paper, layered by warmth not darkness */
  --bg:            #F6F1E7;    /* page: warm paper */
  --surface:       #FCF8F0;    /* raised cards/panels */
  --surface-tint:  #F0E8D8;    /* quiet tint band */
  --surface-hi:    #F1EBDD;    /* input wells (a touch deeper than the card) */
  --surface-neutral:#F0E8D8;
  --surface-hover: #EFE6D3;

  /* legacy "dark band" names — no dark bands ship now; map to ink/paper */
  --ink:      #211C15;
  --ink-soft: #2E2A23;
  --on-ink:      #F6F1E7;
  --on-ink-mute: #C9C0AE;

  /* text / structure */
  --text-1: #211C15;           /* warm ink */
  --text-2: #6E6455;           /* warm taupe (muted body) */
  --text-3: #837868;           /* faint labels only (decorative) */
  --border:      rgba(33,28,21,0.12);
  --border-hair: rgba(33,28,21,0.16);
  --border-hi:   rgba(30,91,65,0.32);

  /* status hues */
  --green: #1E7A50;
  --amber: #8A5A12;
  --red:   #A23A2A;
  --blue:  #2F6E7A;

  /* radii — small, editorial; never pill */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* shadows — minimal; hairlines do the separation */
  --shadow:    0 1px 2px rgba(33,28,21,0.05);
  --shadow-lg: 0 6px 22px rgba(33,28,21,0.08);

  /* type */
  --display: 'Gloock','Gloock Fallback',Georgia,'Times New Roman',serif;
  --body:    'Inter','Inter Fallback',system-ui,sans-serif;
  --mono:    'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

  /* layout */
  --maxw: 1120px;

  /* header — light editorial on BOTH pages */
  --nav-h:      78px;
  --nav-bg:     #F6F1E7;
  --nav-border: rgba(33,28,21,0.12);
  --nav-text:   #211C15;
  --nav-muted:  #6E6455;
  --nav-accent: #9A5D12;       /* ochre underline */
}

/* ─── Base ─── */
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--text-2);
  line-height:1.65;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* faint paper grain — editorial texture, barely there */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.025;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* serif display headings — Gloock is single-weight (400) */
h1,h2,h3{ color:var(--text-1); font-family:var(--display); font-weight:400; line-height:1.08; letter-spacing:-0.01em; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(154,93,18,0.18); }
::-moz-selection{ background:rgba(154,93,18,0.18); }

/* ─── Utilities ─── */
.hidden{ display:none !important; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
/* Eyebrows: mono small-caps labels — ochre, editorial */
.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.18em; color:var(--accent);
}

/* ─── Focus (visible, everywhere) ─── */
:where(a,button):focus-visible{
  outline:2px solid var(--primary); outline-offset:3px; border-radius:4px;
}

/* ═══ SHARED HEADER — light, hairline-ruled ═══ */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--nav-bg);
  border-bottom:1px solid var(--nav-border);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .nav{
    background:color-mix(in srgb, var(--nav-bg) 80%, transparent);
    -webkit-backdrop-filter:saturate(120%) blur(12px);
    backdrop-filter:saturate(120%) blur(12px);
  }
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); }
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--display); font-weight:400; font-size:1.4rem;
  color:var(--nav-text); letter-spacing:-0.01em;
}
.brand img{ width:26px; height:26px; display:block; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.brand:hover img{ transform:rotate(-6deg) scale(1.08); }
.brand em{ color:var(--accent); font-style:normal; }

.nav-links{ display:flex; align-items:center; gap:2.25rem; }
.nav-links .btn{ margin-left:1.25rem; }
.nav-links a.txt{
  position:relative; display:inline-flex; align-items:center; gap:5px;
  font-size:.9rem; font-weight:500; color:var(--nav-muted); transition:color .15s ease;
}
.nav-links a.txt::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background:var(--nav-accent); border-radius:2px;
  transform:scaleX(0); transform-origin:right; transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.nav-links a.txt:hover,
.nav-links a.txt.active{ color:var(--nav-text); }
.nav-links a.txt:hover::after,
.nav-links a.txt.active::after{ transform:scaleX(1); transform-origin:left; }
.nav .btn-primary, .nav .btn-primary:hover{ box-shadow:none; }

@media (max-width:768px){
  .nav-links a.nav-sec{ display:none; }
  .nav-links{ gap:1rem; }
  .nav-links .btn{ margin-left:0; }
  :root{ --nav-h:66px; }
}

/* ═══ SHARED BUTTONS — editorial: squared, hairline, no glow/shine ═══ */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--body); font-size:.98rem; font-weight:600; line-height:1;
  padding:.9rem 1.4rem; border-radius:var(--r-md); border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap; position:relative;
}
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-strong); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--text-1); border-color:var(--border-hair); }
.btn-ghost:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-1px); }
.btn:active{ transform:scale(.985); }
.btn-arrow{ transition:transform .15s ease; }
.btn:hover .btn-arrow{ transform:translateX(3px); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn:hover, .btn-primary:hover, .btn-ghost:hover, .btn:active{ transform:none; }
  .btn:hover .btn-arrow{ transform:none; }
}