/* =====================================================================
   SK Group — design tokens & semantic color utilities
   ---------------------------------------------------------------------
   Single source of truth for the brand palette. Shared by index.html
   and post.html, loaded AFTER the prebuilt tailwind.css so these
   semantic classes are available without rebuilding Tailwind.

   To recolor the brand, edit ONE value: --brand-rgb (gold) or
   --ink-rgb (slate). Every solid fill, text color, border, gradient
   and translucent tint below derives from these channels, so the
   change propagates everywhere — including alpha tints like bg-brand/10.

   Utility names mirror the Tailwind arbitrary classes they replaced
   (text-[#FBBF24] -> text-brand, bg-[#1E293B] -> bg-ink, etc.) and
   honor Tailwind's --tw-*-opacity / --tw-gradient-* contracts, so they
   compose with the rest of the generated utilities unchanged.
   ===================================================================== */

:root {
  /* Channel form — the single source of truth (space-separated RGB) */
  --brand-rgb: 251 191 36;   /* #FBBF24  gold */
  --ink-rgb:    30 41 59;    /* #1E293B  slate ink */

  /* Solid tokens (derived from channels where a translucent variant exists) */
  --brand:        rgb(var(--brand-rgb)); /* gold — for use on dark surfaces */
  --brand-strong: #F59E0B;               /* gold hover */
  --brand-ink:    #B45309;               /* accessible gold for text/links on light bg (~5.9:1) */
  --brand-deep:   #78350F;               /* deep amber heading/text on light */
  --amber-strong: #92400E;               /* amber-800 supporting text */
  --ink:          rgb(var(--ink-rgb));   /* slate ink */
  --ink-2:        #334155;               /* slate (gradients, borders) */
  --ink-deep:     #0F172A;               /* darkest slate surface */
}

/* ── Text ─────────────────────────────────────────────────────────── */
.text-brand        { color: rgb(var(--brand-rgb) / var(--tw-text-opacity, 1)); }
.text-ink          { color: rgb(var(--ink-rgb)   / var(--tw-text-opacity, 1)); }
.text-brand-deep   { color: var(--brand-deep); }
.text-amber-strong { color: var(--amber-strong); }
.text-brand\/30    { color: rgb(var(--brand-rgb) / 0.30); }
.text-ink\/20      { color: rgb(var(--ink-rgb)   / 0.20); }

.hover\:text-brand:hover     { color: rgb(var(--brand-rgb) / var(--tw-text-opacity, 1)); }
.hover\:text-ink:hover       { color: rgb(var(--ink-rgb)   / var(--tw-text-opacity, 1)); }
.hover\:text-brand-ink:hover { color: var(--brand-ink); }

.group:hover .group-hover\:text-ink   { color: rgb(var(--ink-rgb)   / var(--tw-text-opacity, 1)); }
.group:hover .group-hover\:text-brand { color: rgb(var(--brand-rgb) / var(--tw-text-opacity, 1)); }

/* ── Background ───────────────────────────────────────────────────── */
.bg-brand        { background-color: rgb(var(--brand-rgb) / var(--tw-bg-opacity, 1)); }
.bg-brand-strong { background-color: var(--brand-strong); }
.bg-ink          { background-color: rgb(var(--ink-rgb)   / var(--tw-bg-opacity, 1)); }
.bg-ink2         { background-color: var(--ink-2); }
.bg-ink-deep     { background-color: var(--ink-deep); }

.bg-brand\/5  { background-color: rgb(var(--brand-rgb) / 0.05); }
.bg-brand\/10 { background-color: rgb(var(--brand-rgb) / 0.10); }
.bg-brand\/20 { background-color: rgb(var(--brand-rgb) / 0.20); }
.bg-brand\/30 { background-color: rgb(var(--brand-rgb) / 0.30); }
.bg-ink\/10   { background-color: rgb(var(--ink-rgb)   / 0.10); }

.hover\:bg-brand:hover        { background-color: rgb(var(--brand-rgb) / var(--tw-bg-opacity, 1)); }
.hover\:bg-brand-strong:hover { background-color: var(--brand-strong); }
.hover\:bg-ink2:hover         { background-color: var(--ink-2); }

.group:hover .group-hover\:bg-brand      { background-color: rgb(var(--brand-rgb) / var(--tw-bg-opacity, 1)); }
.group:hover .group-hover\:bg-brand\/20  { background-color: rgb(var(--brand-rgb) / 0.20); }
.group:hover .group-hover\:bg-brand\/30  { background-color: rgb(var(--brand-rgb) / 0.30); }

/* ── Border ───────────────────────────────────────────────────────── */
.border-brand   { border-color: rgb(var(--brand-rgb) / var(--tw-border-opacity, 1)); }
.border-ink     { border-color: rgb(var(--ink-rgb)   / var(--tw-border-opacity, 1)); }
.border-ink2    { border-color: var(--ink-2); }
.border-brand\/30 { border-color: rgb(var(--brand-rgb) / 0.30); }
.border-brand\/40 { border-color: rgb(var(--brand-rgb) / 0.40); }
.border-ink\/20   { border-color: rgb(var(--ink-rgb)   / 0.20); }

.hover\:border-brand:hover     { border-color: rgb(var(--brand-rgb) / var(--tw-border-opacity, 1)); }
.hover\:border-brand\/40:hover { border-color: rgb(var(--brand-rgb) / 0.40); }

/* ── Ring ─────────────────────────────────────────────────────────── */
.focus\:ring-brand:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--brand-rgb) / var(--tw-ring-opacity, 1));
}

/* ── Gradient stops (mirrors Tailwind's --tw-gradient-* contract) ──── */
.from-brand {
  --tw-gradient-from: rgb(var(--brand-rgb)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink {
  --tw-gradient-from: rgb(var(--ink-rgb)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--ink-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink\/60 {
  --tw-gradient-from: rgb(var(--ink-rgb) / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--ink-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-ink2         { --tw-gradient-to: var(--ink-2) var(--tw-gradient-to-position); }
.to-brand-strong { --tw-gradient-to: var(--brand-strong) var(--tw-gradient-to-position); }

/* ── Responsive hardening ─────────────────────────────────────────── */

/* Defensive: a small decorative overshoot must never produce a horizontal
   scrollbar on mobile. `clip` (not `hidden`) avoids creating a scroll
   container, so position: sticky/fixed descendants keep working. */
html { overflow-x: clip; }

/* About-section floating cards: full -1.25rem offset reads as "floating"
   on desktop but overshoots the viewport ~4px at phone widths, causing a
   horizontal scroll. Pull them in on small screens, restore at >=640px. */
.about-float-tr { top: -0.75rem; right: -0.75rem; }
.about-float-bl { bottom: -0.75rem; left: -0.75rem; }
@media (min-width: 640px) {
  .about-float-tr { top: -1.25rem; right: -1.25rem; }
  .about-float-bl { bottom: -1.25rem; left: -1.25rem; }
}

/* ── Loading skeleton (News fetch) ────────────────────────────────── */
.sk-skeleton { position: relative; overflow: hidden; background: #e7ebf0; }
.sk-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.65), transparent);
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .sk-skeleton::after { animation: none; }
}

/* ── Touch targets (WCAG 2.5.5 AAA = 44x44) ───────────────────────── */
.w-11 { width: 2.75rem; }
.h-11 { height: 2.75rem; }
/* Mobile nav rows: guarantee a 44px tap height without per-link edits */
.mobile-link { min-height: 2.75rem; display: flex; align-items: center; }
/* Generic 44px tap guarantee for standalone controls/links */
.tap44 { min-height: 2.75rem; display: flex; align-items: center; }

/* ── AAA contrast tuning (target 7:1 body, daylight legibility) ───── */
/* gray-400 (#9ca3af → 2.8:1) and gray-500 (#6b7280 → 4.8:1) miss 7:1 on
   white. Darken to gray-600 (#4b5563 → 7.6:1) for all light surfaces… */
.text-gray-400 { color: #4b5563; }
.text-gray-500 { color: #4b5563; }
/* …then restore light muted text on dark surfaces, where the same
   utilities sit on ink and need to go lighter, not darker. Scoping by
   the dark background class covers #why / #equipment / #testimonials
   (bg-ink), the footer + equipment cards (bg-ink-deep) and the dark
   contact panel in one rule; #home is image-backed so it's listed too. */
#home .text-gray-400, #home .text-gray-500,
.bg-ink .text-gray-400, .bg-ink .text-gray-500, .bg-ink .text-gray-600,
.bg-ink-deep .text-gray-400, .bg-ink-deep .text-gray-500, .bg-ink-deep .text-gray-600 {
  color: #cbd5e1; /* slate-300: ≥9:1 on ink / ink-deep */
}

/* Uppercase category labels (services, certs, team) sit on white/tinted
   surfaces; the -600 weights miss 7:1. Bump to -800/brand-deep. */
.uppercase.text-amber-600  { color: #78350f; } /* brand-deep, 8.9:1 */
.uppercase.text-green-600  { color: #166534; } /* green-800,  7.5:1 */
.uppercase.text-teal-600   { color: #115e59; } /* teal-800,   7.4:1 */
.uppercase.text-blue-600   { color: #1e40af; } /* blue-800,   8.3:1 */
.uppercase.text-purple-600 { color: #6b21a8; } /* purple-800, 7.6:1 */
/* Role/category badges: amber-700 on amber-100 is only 4.5:1. */
.bg-amber-100.text-amber-700 { color: #78350f; }

/* WhatsApp action buttons: white on green-500 is 2.3:1. green-700 keeps
   the recognizable WhatsApp green while reaching 5.3:1 (solid AA — the
   one place brand-color recognizability is worth AA over AAA). */
.bg-green-700 { background-color: #15803d; }
.hover\:bg-green-800:hover { background-color: #166534; }