/* ============================================================
   AEVIAM DESIGN SYSTEM — single source of truth
   Linked by every page. Change a token here, it cascades site-wide.
   Direction: confident, light, measurement-led wellness-tech.
   Stark warm white + warm jewelry (champagne accent used sparingly).
   See DESIGN-NOTES.md for the full brand / motion / button spec.
   ============================================================ */

:root{
  /* palette */
  --surface:#FAFAF7;          /* dominant background — stark warm white */
  --surface-raised:#FFFFFF;   /* cards, elevated */
  --surface-sunken:#F2F0EA;   /* inputs, inset tiles, soft bands */
  --ink:#1A1A1A;              /* primary text, large numbers, buttons */
  --ink-soft:#58574F;         /* secondary text, tagline */
  --ink-mute:#8E8C82;         /* captions, eyebrows, meta, chart labels */
  --accent:#C2895A;           /* warm champagne — DATA, key numbers, primary accent only */
  --accent-soft:#E8D4BC;      /* washes, hover, avatar gradients */
  --positive:#7FB89E;         /* progress / positive change — sage */
  --hairline:#E8E5DD;         /* dividers, borders, gridlines — always 1px */

  /* spacing scale: 4 8 12 16 24 32 48 64 96 128 */
  --s4:4px;--s8:8px;--s12:12px;--s16:16px;--s24:24px;--s32:32px;--s48:48px;--s64:64px;--s96:96px;--s128:128px;

  --radius:16px;
  --shadow:0 1px 2px rgba(0,0,0,.02);

  /* motion */
  --ease:cubic-bezier(0.22,1,0.36,1);
}

html{-webkit-text-size-adjust:100%}
body{
  background-color:var(--surface);
  background-image:radial-gradient(var(--hairline) 1px, transparent 1.4px);
  background-size:30px 30px;
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---- typography helpers ---- */
.display{font-family:'Playfair Display',Georgia,serif;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.eyebrow{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.num{font-family:'Playfair Display',Georgia,serif;font-weight:600;color:var(--accent);line-height:1}

/* ---- cards (re-defines legacy .glass-panel so existing markup restyles) ---- */
.card,.glass-panel{
  background:var(--surface-raised);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* ============================================================
   BUTTON SYSTEM — flat, solid, confident. No gradients/shine/glow.
   ============================================================ */
.gold-glow{box-shadow:var(--shadow)!important}
/* neutralise legacy shine/glow site-wide */
.tactile-button{box-shadow:none!important}
.tactile-button::after{content:none!important;display:none!important;background:none!important}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;font-family:'Inter',sans-serif;font-weight:500;font-size:15px;
  letter-spacing:.3px;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn .arrow{display:inline-block;transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.btn:active{transform:scale(.98)}

.btn-primary{padding:14px 32px;background:var(--ink);color:var(--surface);border:1.5px solid var(--ink);transition:background-color .2s ease}
.btn-primary:hover{background:#2A2A2A}

.btn-secondary{padding:12.5px 30.5px;background:transparent;color:var(--ink);border:1.5px solid var(--ink);transition:background-color .2s ease,color .2s ease}
.btn-secondary:hover{background:var(--ink);color:var(--surface)}

.btn-tertiary{padding:0;background:none;border:none;color:var(--ink);letter-spacing:.3px}
.btn-tertiary:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.btn-tertiary:active{transform:none}

/* inverted primary for dark bands */
.btn-invert{padding:14px 32px;background:var(--surface);color:var(--ink);border:1.5px solid var(--surface);transition:background-color .2s ease}
.btn-invert:hover{background:#ECEAE3}

/* nav CTA — tighter */
.btn-nav{padding:12px 24px}

/* ---- inputs ---- */
.input{background:var(--surface-sunken);border:1.5px solid transparent;border-radius:12px;padding:14px 18px;font-size:16px;font-family:'Inter',sans-serif;color:var(--ink);width:100%}
.input:focus{outline:none;border-color:var(--ink)}

/* ============================================================
   BRAND LOCKUPS
   ============================================================ */
.lockup{display:inline-flex;align-items:center;gap:22px}
.lockup .mark{display:block;flex:none}
.wordmark{font-family:'Inter',sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:4px;color:var(--ink);line-height:1}
.wordmark--invert{color:var(--surface)}

/* combo + tagline (footer, CTA band) */
.lockup-tag{display:inline-flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.lockup-tag .rule-row{display:flex;align-items:center;gap:14px;width:100%}
.lockup-tag .rule{flex:1 1 auto;height:1px;background:var(--hairline)}
.lockup-tag .tagline{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:6px;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.lockup-tag--invert .rule{background:rgba(250,250,247,.22)}
.lockup-tag--invert .tagline{color:rgba(250,250,247,.7)}

/* ============================================================
   CODE-BUILT AVATARS (gradient + serif initial)
   ============================================================ */
.avatar{position:relative;border-radius:999px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;
  background:
    radial-gradient(120% 120% at 25% 20%, rgba(232,212,188,.9) 0%, rgba(232,212,188,0) 55%),
    radial-gradient(120% 120% at 80% 85%, rgba(194,137,90,.32) 0%, rgba(194,137,90,0) 55%),
    var(--surface-sunken);
  border:1px solid var(--hairline)}
.avatar--b{background:
    radial-gradient(120% 120% at 80% 20%, rgba(232,212,188,.95) 0%, rgba(232,212,188,0) 55%),
    radial-gradient(120% 120% at 20% 90%, rgba(194,137,90,.28) 0%, rgba(194,137,90,0) 55%),
    var(--surface-sunken)}
.avatar--c{background:
    radial-gradient(130% 130% at 50% 0%, rgba(232,212,188,.85) 0%, rgba(232,212,188,0) 60%),
    radial-gradient(120% 120% at 70% 100%, rgba(194,137,90,.3) 0%, rgba(194,137,90,0) 55%),
    var(--surface-sunken)}
.avatar .initial{font-family:'Playfair Display',Georgia,serif;font-weight:600;color:var(--ink);line-height:1}

/* ============================================================
   MOTION SYSTEM
   Initial hidden states apply ONLY when JS is active (html.js) AND
   the user hasn't asked for reduced motion. No-JS = fully visible.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  html.js [data-anim]{
    opacity:0;
    transform:translateY(var(--y,16px));
    transition:opacity var(--d,600ms) var(--ease) var(--delay,0ms),
               transform var(--d,600ms) var(--ease) var(--delay,0ms);
    will-change:opacity,transform;
  }
  html.js [data-anim="fade"]{transform:none}
  html.js [data-anim].in{opacity:1;transform:none}
  /* chart line draw */
  html.js [data-draw]{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);
    transition:stroke-dashoffset 1200ms var(--ease)}
  html.js [data-draw].in{stroke-dashoffset:0}
}
@media (prefers-reduced-motion: reduce){
  html.js [data-anim]{opacity:1!important;transform:none!important}
  html.js [data-draw]{stroke-dashoffset:0!important}
}

/* ---- subtle accent wash ---- */
.hero-gradient{background:radial-gradient(60% 55% at 72% 28%, rgba(232,212,188,.35) 0%, rgba(232,212,188,0) 70%)}
.wash{background:radial-gradient(120% 120% at 50% 0%, rgba(232,212,188,.18) 0%, rgba(232,212,188,0) 60%)}

/* ---- meters / bars ---- */
.meter{background:var(--hairline)}
.meter > span{display:block;height:100%;border-radius:999px;background:var(--accent)}

/* ---- token utility classes (so new names work on pages whose Tailwind config
        predates them) ---- */
.text-ink{color:var(--ink)} .text-ink-soft{color:var(--ink-soft)} .text-ink-mute{color:var(--ink-mute)}
.text-accent{color:var(--accent)} .text-positive{color:var(--positive)} .text-surface{color:var(--surface)}
.bg-ink{background-color:var(--ink)} .bg-surface{background-color:var(--surface)}
.bg-surface-raised{background-color:var(--surface-raised)} .bg-surface-sunken{background-color:var(--surface-sunken)}
.bg-accent{background-color:var(--accent)} .bg-surface-glass{background-color:rgba(255,255,255,.82)}
.border-ink{border-color:var(--ink)} .border-hairline{border-color:var(--hairline)}