/* =========================================================
   VITALIGN — DESIGN SYSTEM
   Editorial spine (flat, architectural, slow) with selective
   physicality on interactive elements only.

   Plain CSS custom properties — no Tailwind, no build step,
   works on Hostinger shared hosting as-is.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Brand — three colours, unchanged */
  --bone:        #F5F2EA;   /* page background, "expensive paper"       */
  --bone-deep:   #EBE5DE;   /* elevated surface, alternate rows         */
  --spruce:      #1F4D3D;   /* text, borders, dark sections   8.58:1 AAA*/
  --spruce-soft: #4A5F55;   /* secondary text                 6.14:1 AA */
  --amber:       #D99A45;   /* STRUCTURAL accent only — never body text */

  /* Semantic — status only, never decoration */
  --teal:        #1E6F6A;   /* in range / success                       */
  --violet:      #5B4B8A;   /* informational / neutral note             */
  --clay:        #A1442F;   /* out of range / needs attention           */

  /* Ink on dark sections */
  --on-dark:      #F5F2EA;
  --on-dark-soft: rgba(245,242,234,.72);

  /* Hairlines — the design language is built from lines, not boxes */
  --line:        rgba(31,77,61,.16);
  --line-strong: rgba(31,77,61,.38);
  --line-amber:  rgba(217,154,69,.55);

  /* Type */
  --serif: "Fraunces", "Playfair Display", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scale — fluid, no breakpoint jumps */
  --t-hero:  clamp(2.75rem, 7vw,  6rem);
  --t-sect:  clamp(2rem,   4.4vw, 3.5rem);
  --t-sub:   clamp(1.35rem,2.2vw, 1.9rem);
  --t-body:  1.0625rem;
  --t-small: .875rem;
  --t-label: .6875rem;

  /* Space */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem;
  --s-6:3rem;  --s-8:4rem; --s-12:6rem;  --s-16:8rem;

  /* Depth — restrained, never glowing */
  --lift-1: 0 1px 2px rgba(31,50,42,.05);
  --lift-2: 0 6px 22px rgba(31,50,42,.09);
  --lift-3: 0 14px 40px rgba(31,50,42,.14);
  --inset:  inset 0 0 0 1px rgba(31,77,61,.07);

  /* Motion — editorial slowness, except direct manipulation */
  --ease: cubic-bezier(.25,.46,.45,.94);
  --m-press: 120ms;    /* button press must feel instant  */
  --m-ui:    320ms;    /* hover, focus                    */
  --m-slow:  700ms;    /* colour, background              */
  --m-cine: 1500ms;    /* imagery                         */
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--bone);
  color:var(--spruce);
  font:400 var(--t-body)/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Paper grain — 2% opacity, tactile without being visible */
body::before{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2. STRUCTURE ---------- */
.vt-wrap{ max-width:1240px; margin:0 auto; padding:0 var(--s-3) }
@media(min-width:900px){ .vt-wrap{ padding:0 var(--s-8) } }

/* Editorial gridlines — desktop only, purely architectural */
.vt-grid-lines{ position:fixed; inset:0; z-index:0; pointer-events:none; display:none }
@media(min-width:1100px){
  .vt-grid-lines{ display:block }
  .vt-grid-lines i{ position:absolute; top:0; bottom:0; width:1px; background:var(--line) }
  .vt-grid-lines i:nth-child(1){ left:16.6% }
  .vt-grid-lines i:nth-child(2){ left:50% }
  .vt-grid-lines i:nth-child(3){ left:83.3% }
}

/* ---------- 3. TYPE ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:400; margin:0 0 var(--s-3) }
h1{ font-size:var(--t-hero); line-height:.95; letter-spacing:-.02em }
h2{ font-size:var(--t-sect); line-height:1.05; letter-spacing:-.015em }
h3{ font-size:var(--t-sub);  line-height:1.2 }

/* Mixed-italic headline emphasis — signature editorial move */
.vt-em{ font-style:italic; color:var(--spruce) }
.vt-em::after{
  content:""; display:block; height:2px; margin-top:.15em;
  background:var(--amber); transform-origin:left;
}

.vt-label{
  font:500 var(--t-label)/1 var(--sans);
  text-transform:uppercase; letter-spacing:.26em;
  color:var(--spruce-soft);
}
.vt-rule{ display:inline-block; width:2.5rem; height:1px; background:var(--amber); vertical-align:middle; margin-right:var(--s-2) }

.vt-lede{ font-size:1.1875rem; line-height:1.7; color:var(--spruce-soft); max-width:40ch }
.vt-muted{ color:var(--spruce-soft) }

/* Drop cap */
.vt-dropcap::first-letter{
  font-family:var(--serif); font-size:4.2em; line-height:.8;
  float:left; margin:.05em .12em 0 0; color:var(--spruce);
}

/* ---------- 4. BUTTONS — physical, the one place speed is right ---------- */
.vt-btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:0 var(--s-4);
  border:1px solid var(--spruce); border-radius:0;
  font:500 var(--t-label)/1 var(--sans);
  text-transform:uppercase; letter-spacing:.2em;
  cursor:pointer; text-decoration:none;
  background:var(--spruce); color:var(--on-dark);
  box-shadow:var(--lift-1);
  transition:box-shadow var(--m-ui) var(--ease), transform var(--m-press) var(--ease);
}
/* Amber sweeps in from the left — structural use of the accent */
.vt-btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--amber);
  transform:translateX(-101%);
  transition:transform var(--m-slow) var(--ease);
}
.vt-btn:hover{ box-shadow:var(--lift-2) }
.vt-btn:hover::before{ transform:translateX(0) }
.vt-btn:active{ transform:translateY(1px); box-shadow:var(--inset) }
.vt-btn[disabled]{ opacity:.45; pointer-events:none }

.vt-btn--ghost{ background:transparent; color:var(--spruce) }
.vt-btn--ghost:hover{ color:var(--on-dark) }
.vt-btn--ghost::before{ background:var(--spruce) }

.vt-btn--wide{ width:100% }

/* ---------- 5. INPUTS — underline only, italic serif placeholder ---------- */
.vt-field{ margin-bottom:var(--s-3) }
.vt-field label{
  display:block; margin-bottom:.4rem;
  font:500 var(--t-label)/1 var(--sans);
  text-transform:uppercase; letter-spacing:.22em; color:var(--spruce-soft);
}
.vt-input{
  width:100%; min-height:48px;
  padding:.6rem 0; border:0; border-bottom:1px solid var(--line-strong);
  border-radius:0; background:transparent;
  font:400 1rem var(--sans); color:var(--spruce);
  transition:border-color var(--m-ui) var(--ease);
}
.vt-input::placeholder{ font-family:var(--serif); font-style:italic; color:var(--spruce-soft); opacity:.75 }
.vt-input:focus{ outline:none; border-bottom-color:var(--amber); border-bottom-width:2px }
.vt-input:focus-visible{ outline:2px solid var(--amber); outline-offset:4px }

/* ---------- 6. SURFACES — defined by a top rule, not a box ---------- */
.vt-card{
  border-top:1px solid var(--line-strong);
  padding:var(--s-4) 0;
  background:transparent;
  transition:background var(--m-slow) var(--ease), box-shadow var(--m-ui) var(--ease);
}
.vt-card--panel{
  border:1px solid var(--line);
  padding:var(--s-4);
  background:#FBF9F4;
  box-shadow:var(--lift-1), var(--inset);
}
.vt-card--feature{ border-top:3px solid var(--amber) }

/* ---------- 7. STATUS — the only place violet and teal appear ---------- */
.vt-status{
  display:inline-flex; align-items:center; gap:.45rem;
  font:500 var(--t-label)/1 var(--sans);
  text-transform:uppercase; letter-spacing:.18em;
  padding:.45rem .7rem; border-left:2px solid currentColor;
}
.vt-status--ok{   color:var(--teal) }
.vt-status--info{ color:var(--violet) }
.vt-status--flag{ color:var(--clay) }
.vt-status b{ font-weight:500 }

/* ---------- 8. DARK SECTION — inverted, for rhythm ---------- */
.vt-dark{ background:var(--spruce); color:var(--on-dark) }
.vt-dark h1,.vt-dark h2,.vt-dark h3{ color:var(--on-dark) }
.vt-dark .vt-muted,.vt-dark .vt-lede,.vt-dark .vt-label{ color:var(--on-dark-soft) }
.vt-dark .vt-input{ color:var(--on-dark); border-bottom-color:rgba(245,242,234,.35) }
.vt-dark .vt-input::placeholder{ color:var(--on-dark-soft) }
.vt-dark .vt-btn{ background:var(--bone); color:var(--spruce); border-color:var(--bone) }

/* ---------- 9. SECTION RHYTHM ---------- */
.vt-section{ padding:var(--s-12) 0 }
@media(min-width:900px){ .vt-section{ padding:var(--s-16) 0 } }
.vt-section + .vt-section{ border-top:1px solid var(--line) }

/* Asymmetric editorial split — 7/5, never 50/50 */
.vt-split{ display:grid; gap:var(--s-6) }
@media(min-width:900px){
  .vt-split{ grid-template-columns:7fr 5fr; gap:var(--s-8); align-items:start }
  .vt-split--offset > *:first-child{ grid-column:1 }
  .vt-split--reverse{ grid-template-columns:5fr 7fr }
}

/* ---------- 10. ACCESSIBILITY ---------- */
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px }
.vt-skip{ position:absolute; left:-9999px }
.vt-skip:focus{ left:var(--s-2); top:var(--s-2); z-index:100; background:var(--spruce); color:var(--on-dark); padding:var(--s-2) }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}