/* =========================================================================
   ANILLO — DESIGN SYSTEM
   One source of truth for both pages. Tokens → base → components → states.
   Identity preserved: wine / void / gold / blush + Bodoni Moda × Manrope.
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* Brand palette (unchanged from the original identity) */
  --void:#170710;
  --void-soft:#220c16;
  --wine:#6b0f3d;
  --wine-deep:#3c0a23;
  --wine-bright:#8c1450;
  --blush:#f3cfe2;
  --blush-soft:#f8e3ee;
  --gold:#bd9a5f;
  --gold-soft:#d8c294;
  --ivory:#fbf6f1;
  --ivory-dim:#f3ece4;
  --ink:#241019;
  --ink-soft:#5a3d4b;

  /* Semantic state colours (NEW — all meet ≥4.5:1 on ivory) */
  --success:#2f6b4f;      --success-on:#ffffff;   --success-soft:#e7f1ea;
  --error:#b3261e;        --error-on:#ffffff;     --error-soft:#fbe9e7;
  --warning:#8a5a00;      --warning-on:#ffffff;   --warning-soft:#f7edd6;
  --info:#2b4a6b;         --info-on:#ffffff;      --info-soft:#e6edf4;

  /* Surfaces / borders (light context defaults) */
  --surface:var(--ivory);
  --surface-2:var(--ivory-dim);
  --border:rgba(107,15,61,.16);
  --text:var(--ink);
  --text-soft:var(--ink-soft);
  --accent:var(--wine);
  --focus:var(--wine);

  /* Typography */
  --serif:"Bodoni Moda","Times New Roman",serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --step--1:0.833rem;
  --step-0:1rem;          /* 16px base */
  --step-1:1.25rem;
  --step-2:1.563rem;
  --step-3:1.953rem;
  --step-4:2.441rem;
  --step-5:3.052rem;
  --display:clamp(2.6rem,7vw,5.2rem);

  /* Spacing (8px rhythm) */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;  --space-7:3rem;   --space-8:4rem;
  --space-9:6rem;   --space-10:8rem;

  /* Radius / shadow */
  --r-sm:2px; --r-md:4px; --r-lg:12px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(23,7,16,.06),0 8px 24px rgba(23,7,16,.06);
  --shadow-2:0 20px 60px rgba(23,7,16,.18);

  /* Motion */
  --dur-fast:150ms; --dur:300ms; --dur-slow:450ms;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* Layout */
  --max:1180px; --gutter:32px;

  /* z-index */
  --z-ring:90; --z-nav:100; --z-toast:200; --z-skip:300;
}

/* ---------- 2. RESET / BASE --------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.6;
  background:var(--surface);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none;}
ul{list-style:none;}
::selection{background:var(--gold-soft);color:var(--ink);}

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* Skip link (a11y) */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:var(--z-skip);
  background:var(--gold);color:var(--void);
  padding:12px 20px;border-radius:0 0 var(--r-md) 0;font-weight:700;
  letter-spacing:.04em;
}
.skip-link:focus{left:0;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}
@media (max-width:640px){:root{--gutter:20px;}}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 3. SECTION THEMES ------------------------------------------- */
.section{padding:var(--space-9) 0;}
.section--dark{
  --surface:var(--void);--surface-2:var(--void-soft);
  --text:var(--blush-soft);--text-soft:rgba(243,207,226,.72);
  --border:rgba(189,154,95,.22);--accent:var(--gold);--focus:var(--gold);
  background:var(--void);color:var(--text);
}
.section--wine{
  --surface:var(--wine-deep);--text:var(--blush-soft);
  --text-soft:rgba(243,207,226,.78);--border:rgba(216,194,148,.28);
  --accent:var(--gold);--focus:var(--gold);
  background:radial-gradient(120% 90% at 50% 0%,var(--wine) 0%,var(--wine-deep) 70%);
  color:var(--text);
}
.section--light{background:var(--ivory);}
.section--dim{background:var(--ivory-dim);}

/* ---------- 4. TYPOGRAPHY ----------------------------------------------- */
.display{
  font-family:var(--serif);font-weight:500;font-size:var(--display);
  line-height:1.02;letter-spacing:-.01em;text-wrap:balance;
}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;text-wrap:balance;}
h2{font-size:var(--step-4);}
h3{font-size:var(--step-2);}
.lead{font-size:var(--step-1);color:var(--text-soft);max-width:60ch;text-wrap:pretty;}
.eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6;}
.sec-head{max-width:60ch;margin-bottom:var(--space-7);}
.sec-head h2{margin:var(--space-3) 0 var(--space-3);}

/* ---------- 5. BUTTONS -------------------------------------------------- */
.btn{
  font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;padding:15px 30px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid transparent;min-height:44px;white-space:nowrap;
  transition:transform var(--dur-slow) var(--ease),background var(--dur),
             color var(--dur),border-color var(--dur),opacity var(--dur);
}
.btn:hover{transform:translateY(-2px);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;transform:none;}
.btn-primary{background:var(--gold);color:var(--void);}
.btn-primary:hover{background:var(--gold-soft);}
.btn-ghost{border-color:currentColor;color:var(--accent);}
.btn-ghost:hover{background:var(--accent);color:var(--surface);}
.btn-ghost-dark{border-color:rgba(243,207,226,.35);color:var(--blush-soft);}
.btn-ghost-dark:hover{border-color:var(--gold);color:var(--gold-soft);}
.btn--full{width:100%;}

/* Button loading state */
.btn.is-loading{position:relative;color:transparent!important;pointer-events:none;}
.btn.is-loading::after{
  content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  color:var(--void);animation:spin .7s linear infinite;
}
.btn-ghost-dark.is-loading::after,.btn-ghost.is-loading::after{color:var(--gold);}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- 6. CARDS ---------------------------------------------------- */
.card{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--space-6);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);}
.grid{display:grid;gap:var(--space-5);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}}

/* ---------- 7. NAV / HEADER --------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);padding:20px 0;
  background:linear-gradient(to bottom,rgba(23,7,16,.78),rgba(23,7,16,0));
  transition:background var(--dur),padding var(--dur),backdrop-filter var(--dur);
}
.site-header.scrolled{
  background:rgba(23,7,16,.94);backdrop-filter:blur(10px);padding:12px 0;
  box-shadow:0 1px 0 rgba(189,154,95,.18);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brandmark{display:flex;align-items:center;gap:12px;}
.brandmark img{width:28px;height:auto;filter:brightness(0) saturate(100%) invert(1) opacity(.92);}
.brandmark .word{font-family:var(--serif);font-size:20px;letter-spacing:.12em;color:var(--ivory);font-weight:600;}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blush-soft);opacity:.85;position:relative;font-weight:600;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:1px;background:var(--gold);transition:width var(--dur);}
.nav-links a:hover{opacity:1;}
.nav-links a:hover::after{width:100%;}
.nav-toggle{display:none;color:var(--ivory);font-size:24px;width:44px;height:44px;align-items:center;justify-content:center;}
@media (max-width:880px){
  .nav-menu{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:18px;
    background:rgba(23,7,16,.98);padding:24px var(--gutter);
    display:none;border-top:1px solid rgba(189,154,95,.18);
  }
  .nav-menu.open{display:flex;}
  .nav-toggle{display:inline-flex;}
}

/* ---------- 8. FOOTER --------------------------------------------------- */
.site-footer{background:var(--void);color:var(--blush-soft);padding:var(--space-8) 0 var(--space-6);}
.site-footer a{color:var(--blush-soft);opacity:.8;}
.site-footer a:hover{opacity:1;color:var(--gold-soft);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--space-6);margin-bottom:var(--space-6);}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr;}}
.footer-note{border-top:1px solid rgba(189,154,95,.18);padding-top:var(--space-4);font-size:var(--step--1);color:rgba(243,207,226,.6);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* ---------- 9. FORMS ---------------------------------------------------- */
.form{display:grid;gap:var(--space-5);}
.field{display:grid;gap:6px;}
.field label{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);}
.field .req{color:var(--accent);}
.input,.select,.textarea{
  font:inherit;font-size:var(--step-0);width:100%;padding:14px 16px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-md);
  transition:border-color var(--dur),box-shadow var(--dur);min-height:44px;
}
.textarea{min-height:120px;resize:vertical;}
.input::placeholder,.textarea::placeholder{color:var(--text-soft);opacity:.7;}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);}
.field .help{font-size:var(--step--1);color:var(--text-soft);}
/* field error */
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea{border-color:var(--error);box-shadow:0 0 0 3px var(--error-soft);}
.field-error{font-size:var(--step--1);color:var(--error);font-weight:600;display:none;}
.field[data-invalid="true"] .field-error{display:block;}
.section--dark .field-error{color:#ff9b93;}
/* honeypot */
.hp{position:absolute!important;left:-9999px;height:0;width:0;overflow:hidden;}

/* ---------- 10. ALERTS (error / success / info / warning) --------------- */
.alert{
  border-radius:var(--r-md);padding:16px 18px;display:flex;gap:12px;
  align-items:flex-start;font-size:var(--step-0);line-height:1.5;
  border:1px solid transparent;
}
.alert__icon{flex:0 0 auto;width:22px;height:22px;}
.alert__title{font-weight:700;display:block;margin-bottom:2px;}
.alert--error{background:var(--error-soft);color:#7c1a15;border-color:color-mix(in srgb,var(--error) 30%,transparent);}
.alert--success{background:var(--success-soft);color:#1e4a35;border-color:color-mix(in srgb,var(--success) 30%,transparent);}
.alert--info{background:var(--info-soft);color:#1c3049;border-color:color-mix(in srgb,var(--info) 30%,transparent);}
.alert--warning{background:var(--warning-soft);color:#5e3d00;border-color:color-mix(in srgb,var(--warning) 30%,transparent);}
.alert a{text-decoration:underline;font-weight:600;}
[hidden]{display:none!important;}

/* Error summary links */
.error-summary ul{margin-top:8px;display:grid;gap:4px;}
.error-summary a{color:inherit;}

/* ---------- 11. SUCCESS PANEL (form replacement) ------------------------ */
.form-success{
  text-align:center;padding:var(--space-7) var(--space-5);
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface-2);
}
.form-success .mark{
  width:56px;height:56px;border-radius:50%;margin:0 auto var(--space-4);
  display:grid;place-items:center;background:var(--gold);color:var(--void);
}
.form-success h3{font-size:var(--step-2);margin-bottom:var(--space-2);}

/* ---------- 12. LOADING (skeletons + spinner) --------------------------- */
.skeleton{
  background:linear-gradient(90deg,var(--surface-2) 25%,color-mix(in srgb,var(--surface-2) 60%,#fff) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;
  border-radius:var(--r-md);
}
.skeleton--line{height:14px;margin:8px 0;}
.skeleton--title{height:26px;width:60%;margin-bottom:16px;}
.skeleton--card{height:180px;}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}
.spinner{
  width:24px;height:24px;border-radius:50%;
  border:2px solid var(--border);border-top-color:var(--accent);
  animation:spin .7s linear infinite;display:inline-block;
}
[aria-busy="true"]{cursor:progress;}

/* ---------- 13. EMPTY STATE --------------------------------------------- */
.empty-state{
  text-align:center;padding:var(--space-8) var(--space-5);
  border:1px dashed var(--border);border-radius:var(--r-lg);color:var(--text-soft);
}
.empty-state h3{font-size:var(--step-1);color:var(--text);margin-bottom:var(--space-2);}
.empty-state .empty-icon{font-size:32px;opacity:.5;margin-bottom:var(--space-3);}

/* ---------- 14. REVEAL ANIMATION ---------------------------------------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .btn:hover,.card:hover{transform:none;}
  .skeleton,.spinner,.btn.is-loading::after{animation:none;}
}

/* ---------- 15. PROGRESS RING ------------------------------------------- */
.progress-ring{position:fixed;right:22px;bottom:22px;z-index:var(--z-ring);width:52px;height:52px;opacity:0;transition:opacity var(--dur-slow);pointer-events:none;}
.progress-ring.show{opacity:1;}
.progress-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.progress-ring circle{fill:none;stroke-width:2;}
.progress-ring .track{stroke:rgba(189,154,95,.22);}
.progress-ring .fill{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset .1s linear;}