/*!
 * css/_utilities.css · v2
 * Atomic utility classes · replaces inline styles
 */

/* ─── DISPLAY ─── */
.hidden       { display: none !important; }
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }

/* ─── POSITION ─── */
.relative   { position: relative; }
.absolute   { position: absolute; }
.fixed      { position: fixed; }
.sticky     { position: sticky; }

/* ─── FLEX UTILITIES ─── */
.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-4   { gap: var(--sp-4); }
.gap-8   { gap: var(--sp-8); }
.gap-10  { gap: 10px; }
.gap-12  { gap: var(--sp-12); }
.gap-16  { gap: var(--sp-16); }
.gap-20  { gap: var(--sp-20); }
.gap-24  { gap: var(--sp-24); }
.gap-32  { gap: var(--sp-32); }

/* ─── TEXT ALIGN ─── */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* ─── FONT SIZE (matches --fs-* tokens + common one-off values) ─── */
.text-10   { font-size: var(--fs-10); }
.text-11   { font-size: var(--fs-11); }
.text-12   { font-size: var(--fs-12); }
.text-13   { font-size: var(--fs-13); }
.text-14   { font-size: var(--fs-14); }
.text-15   { font-size: var(--fs-15); }
.text-16   { font-size: var(--fs-16); }
.text-17   { font-size: 17px; }
.text-18   { font-size: var(--fs-18); }
.text-20   { font-size: var(--fs-20); }
.text-22   { font-size: var(--fs-22); }
.text-24   { font-size: var(--fs-24); }
.text-26   { font-size: 26px; }
.text-28   { font-size: var(--fs-28); }
.text-32   { font-size: var(--fs-32); }
.text-36   { font-size: var(--fs-36); }
.text-xs   { font-size: var(--fs-12); }
.text-sm   { font-size: var(--fs-14); }
.text-base { font-size: var(--fs-16); }
.text-lg   { font-size: var(--fs-18); }
.text-xl   { font-size: var(--fs-20); }
.text-2xl  { font-size: var(--fs-24); }
.text-3xl  { font-size: var(--fs-32); }

/* ─── FONT WEIGHT ─── */
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }

/* ─── LINE HEIGHT ─── */
.lh-tight   { line-height: var(--lh-tight); }
.lh-snug    { line-height: var(--lh-snug); }
.lh-base    { line-height: var(--lh-base); }
.lh-relaxed { line-height: var(--lh-relaxed); }
.lh-15      { line-height: 1.5; }
.lh-17      { line-height: 1.7; }

/* ─── LETTER SPACING ─── */
.tracking-tight  { letter-spacing: var(--ls-tight); }
.tracking-snug   { letter-spacing: var(--ls-snug); }
.tracking-base   { letter-spacing: var(--ls-base); }
.tracking-wide   { letter-spacing: var(--ls-wide); }
.tracking-08     { letter-spacing: .08em; }

/* ─── TEXT COLOR ─── */
.text-ink     { color: var(--c-ink); }
.text-ink-2   { color: var(--c-ink-2); }
.text-ink-3   { color: var(--c-ink-3); }
.text-muted   { color: var(--c-ink-3); }
.text-white   { color: var(--c-white); }
.text-black   { color: #000; }
.text-signal  { color: var(--c-signal-d); }
.text-signal-d{ color: var(--c-signal-d); }
.text-fail    { color: var(--c-fail-d); }
.text-pass    { color: var(--c-pass); }
.text-warm    { color: var(--c-warm-d); }
.text-white-70{ color: rgba(255,255,255,.7); }
.text-white-85{ color: rgba(255,255,255,.85); }

/* ─── BACKGROUND COLOR ─── */
.bg-white    { background-color: var(--c-white); }
.bg-surface  { background-color: var(--c-surface); }
.bg-ink      { background-color: var(--c-ink); }
.bg-signal   { background-color: var(--c-signal); }
.bg-signal-08{ background-color: var(--c-signal-08); }

/* ─── OBJECT FIT ─── */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ─── SPACING · padding ─── */
.p-0  { padding: 0; }
.p-4  { padding: var(--sp-4); }
.p-8  { padding: var(--sp-8); }
.p-12 { padding: var(--sp-12); }
.p-16 { padding: var(--sp-16); }
.p-20 { padding: var(--sp-20); }
.p-24 { padding: var(--sp-24); }
.p-32 { padding: var(--sp-32); }

.px-8  { padding-left: var(--sp-8);  padding-right: var(--sp-8); }
.px-12 { padding-left: var(--sp-12); padding-right: var(--sp-12); }
.px-16 { padding-left: var(--sp-16); padding-right: var(--sp-16); }
.px-24 { padding-left: var(--sp-24); padding-right: var(--sp-24); }
.py-8  { padding-top: var(--sp-8);  padding-bottom: var(--sp-8); }
.py-11 { padding-top: 11px; padding-bottom: 11px; }
.py-12 { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
.py-16 { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
.py-24 { padding-top: var(--sp-24); padding-bottom: var(--sp-24); }

/* ─── SPACING · margin ─── */
.m-0     { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0    { margin-top: 0; }
.mt-4    { margin-top: var(--sp-4); }
.mt-8    { margin-top: var(--sp-8); }
.mt-12   { margin-top: var(--sp-12); }
.mt-14   { margin-top: 14px; }
.mt-16   { margin-top: var(--sp-16); }
.mt-24   { margin-top: var(--sp-24); }
.mt-32   { margin-top: var(--sp-32); }
.mb-0    { margin-bottom: 0; }
.mb-4    { margin-bottom: var(--sp-4); }
.mb-6    { margin-bottom: 6px; }
.mb-8    { margin-bottom: var(--sp-8); }
.mb-10   { margin-bottom: 10px; }
.mb-12   { margin-bottom: var(--sp-12); }
.mb-16   { margin-bottom: var(--sp-16); }
.mb-24   { margin-bottom: var(--sp-24); }
.mb-32   { margin-bottom: var(--sp-32); }
.mr-4    { margin-right: 4px; }

/* ─── BORDER · RADIUS ─── */
.rounded-sm { border-radius: var(--r-sm); }
.rounded    { border-radius: var(--r-md); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-xl { border-radius: var(--r-xl); }
.rounded-20 { border-radius: 20px; }
.rounded-pill { border-radius: var(--r-pill); }

.border        { border: 1px solid var(--c-border); }
.border-signal { border: 1px solid var(--c-signal); }
.border-none   { border: 0; }

/* ─── SHADOW ─── */
.shadow-sm  { box-shadow: var(--sh-sm); }
.shadow     { box-shadow: var(--sh-md); }
.shadow-lg  { box-shadow: var(--sh-lg); }
.shadow-none{ box-shadow: none; }

/* ─── WIDTH · HEIGHT ─── */
.w-full     { width: 100%; }
.w-auto     { width: auto; }
.w-14       { width: 14px; }
.h-14       { height: 14px; }
.h-full     { height: 100%; }
.w-h-full   { width: 100%; height: 100%; }
.max-w-xs   { max-width: 320px; }
.max-w-sm   { max-width: 480px; }
.max-w-md   { max-width: 720px; }
.max-w-lg   { max-width: 960px; }
.max-w-800  { max-width: 800px; }
.max-w-xl   { max-width: var(--container-max); }

/* ─── CURSOR ─── */
.cursor-pointer { cursor: pointer; }

/* ─── TEXT DECORATION ─── */
.no-underline { text-decoration: none; }

/* ─── TRANSITIONS ─── */
.transition { transition: all var(--t-base); }

/* ─── LINK · plain ─── */
.link-plain { text-decoration: none; color: inherit; display: block; }

/* ─── ACCESSIBILITY ─── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ─── HONEYPOT FIELD STYLING ─── */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* ─── Phase 2 additions · second-pass utilities ─── */
.mt-10  { margin-top: 10px; }
.mt-20  { margin-top: 20px; }
.mb-14  { margin-bottom: 14px; }
.mb-20  { margin-bottom: 20px; }
.mb-40  { margin-bottom: 40px; }
.mb-48  { margin-bottom: 48px; }
.mb-50  { margin-bottom: 50px; }
.my-6   { margin-top: 6px; margin-bottom: 6px; }
.mx-auto-mb-14 { margin: 0 auto 14px; }
.color-inherit { color: inherit; }
.text-ink-dark { color: var(--c-ink); }   /* legacy alias */
.text-white-80 { color: rgba(255,255,255,.8); }
.text-google-blue { color: #4285F4; }
.text-success-green { color: #059669; }

/* ─── Phase 2 · pass 3 utilities ─── */
.gap-14 { gap: 14px; }
.z-0    { z-index: 0; }
.z-1    { z-index: 1; }
.z-10   { z-index: 10; }
.mt-6   { margin-top: 6px; }

/* ─── Hover utilities (replaces inline onmouseover/onmouseout) ─── */
.hover-lift {
  transition: transform var(--t-base), box-shadow var(--t-base);
}
[data-hover-lift]:hover,
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.1);
}

/* ─── Skip-to-content link · a11y best practice ─── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--c-ink);
  color: var(--c-white) !important;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--c-signal);
}