/* ═══════════════════════════════════════════════════════════════════════════
   KaliBiz — token layer
   Loaded before main.css. Every global decision lives here and nowhere else.

   WHY THIS FILE EXISTS
   The previous stylesheet authored 14 font weights, 12 border radii, 12
   transition durations, 16 line-heights, 8 hover-lift distances and 6 image
   zoom factors. Each value was locally reasonable; none was globally decided.
   Worse, the 14 weights were served by 5 static font instances, so 520/540/560
   all rendered as 600 and 620/640/650/660/680 all rendered as 700 — nine
   authored weights arriving as two. The hierarchy did not exist at render time.

   The rule here: if a value is not in this file, it does not go in the page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Faces ───────────────────────────────────────────────────────────────
   Self-hosted variable fonts. A real wght axis means the authored weight is
   the rendered weight. Fallbacks carry metric overrides so the swap causes
   zero layout shift. */

/* One family for the whole site: Plus Jakarta Sans, the face the client's
   reference designs run on. A single variable file with a real wght axis —
   the authored weight IS the rendered weight. The earlier Archivo + Inter +
   IBM Plex Mono trio was retired on client feedback: mono labels read as
   wireframe annotation, and condensed Archivo read industrial, not modern. */
@font-face {
  font-family: "Jakarta";
  src: url("/fonts/jakarta-var-latin.woff2") format("woff2-variations"),
       url("/fonts/jakarta-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallback so the swap causes zero layout shift. */
@font-face {
  font-family: "Jakarta-fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 104%;
  ascent-override: 101%;
  descent-override: 28%;
  line-gap-override: 0%;
}

:root {
  /* One family for everything. There is no monospace on the site: the old
     --mono token was retired once every rule using it was removed. */
  --display: "Jakarta", "Jakarta-fallback", system-ui, sans-serif;
  --text: "Jakarta", "Jakarta-fallback", system-ui, sans-serif;

  /* ─── Weights: four, all real on the variable axis ────────────────────── */
  --w-reg: 400;
  --w-med: 500;
  --w-semi: 600;
  --w-bold: 700;
  --w-xbold: 800;

  /* ─── Type scale ──────────────────────────────────────────────────────
     11.5px → 96px = 8.35x range. The previous build ran 3.15x, which is why
     nothing on the page read as large or small. Desktop / mobile pairs.     */
  --t-d0: 96px;   --t-d0-m: 52px;    /* the three big figures */
  --t-d1: 62px;   --t-d1-m: 34px;    /* h1, one use per page */
  --t-loud: 40px; --t-loud-m: 27px;  /* h2 on major bands */
  --t-h3a: 34px;  --t-h3a-m: 25px;   /* hydraulic */
  --t-quiet: 30px;--t-quiet-m: 24px; /* h2 on minor bands */
  --t-h3b: 27px;  --t-h3b-m: 22px;   /* marine */
  --t-card: 24px; --t-card-m: 20px;  /* card and service names */
  --t-h3c: 20px;  --t-h3c-m: 18px;   /* trading, contracting */
  --t-lead: 21px; --t-lead-m: 17px;
  --t-body: 17px; --t-body-m: 16px;
  --t-row: 16px;
  --t-small: 13.5px; --t-small-m: 13px;
  --t-code: 13px; --t-code-m: 12.5px;
  --t-label: 11.5px;

  /* ─── Line heights: exactly five ─────────────────────────────────────── */
  --lh-d0: .86;
  --lh-d1: .98;
  --lh-head: 1.14;
  --lh-lead: 1.45;
  --lh-body: 1.60;

  /* ─── Tracking. Jakarta wants near-normal tracking; only display sizes
         tighten, and uppercase labels open up modestly. ────────────────── */
  --tr-d0: -.025em;
  --tr-d1: -.020em;
  --tr-loud: -.015em;
  --tr-card: -.010em;
  --tr-h3c: -.005em;
  --tr-body: 0;
  --tr-small: 0;
  --tr-label: .100em;

  /* ─── Neutrals: cool and clean (slate), matching the reference sites.
         The earlier warm-beige set read unfinished next to them. ────────── */
  --paper: #FFFFFF;
  --paper-2: #F6F8FB;
  --paper-3: #EEF2F6;
  --ink: #0F1A2A;           /* deep navy-slate — dark bands read modern, not black */
  --ink-2: #182640;
  --body: #3F4A5A;          /* 8.2:1 on white */
  --muted: #64748B;         /* 4.8:1 on white */
  --faint: #94A3B8;
  --rule: #E6EAF0;
  --rule-firm: #CBD5E1;
  --on-dark-body: #ABB8C9;  /* on --ink */
  --on-dark-rule: rgba(255,255,255,.10);

  /* ─── Blue: action. Links, primary buttons, focus. Derived from the
         brand-blue end of the KaliBiz logo gradient (#1565C0). ─────────── */
  --blue: #1565C0;          /* 6.2:1 on white */
  --blue-press: #0F4C97;

  /* ─── Accent: the cyan-leaning brand blue — eyebrows, icons, the ticket
         edge, repair markers, the big figures. The brand is blues and greys,
         so the accent is the logo's cyan end pulled dark enough for text
         (4.6:1 on white). The token keeps its historical name so the ~60
         rules that reference it did not need touching. ─────────────────── */
  --amber: #0B76BC;
  --amber-tint: #E9F4FC;

  /* ─── Teal: marine's mark only. ──────────────────────────────────────── */
  --teal: #0E6560;

  /* ─── WhatsApp only, darkened from #25D366 to pass 4.5:1 ─────────────── */
  --green: #128C4B;

  /* ─── Radii: soft and modern ─────────────────────────────────────────── */
  --r-sm: 10px;   /* inputs, tags */
  --r: 18px;      /* cards, ticket, card media */
  --r-lg: 28px;   /* hero corners, feature panels */
  --r-pill: 999px;/* every button */

  /* ─── Shadows: contact layer darker than ambient. Cool-tinted and slightly
         deeper than before — cards carry elevation instead of 1px borders,
         which is most of the difference between utilitarian and finished. ── */
  --sh-1: 0 1px 2px rgba(15,26,42,.06), 0 10px 30px -10px rgba(15,26,42,.10);
  --sh-2: 0 2px 6px rgba(15,26,42,.08), 0 28px 60px -20px rgba(15,26,42,.16);

  /* ─── Motion: two durations, one easing, one lift, one zoom ──────────── */
  --dur-state: 140ms;
  --dur-move: 260ms;
  --ease: cubic-bezier(.2,0,0,1);
  --lift: -2px;
  --zoom: 1.03;

  /* ─── Spacing: base 4. These values and no others. ───────────────────── */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 32px;  --s8: 40px;
  --s9: 48px;  --s10: 56px; --s11: 72px; --s12: 88px; --s13: 104px;

  /* ─── Layout ─────────────────────────────────────────────────────────── */
  --wrap: 1280px;
  --gutter: 24px;
  --hdr: 72px;
}

@media (max-width: 767px) {
  :root { --hdr: 60px; }
}

/* The brand gradient survives on exactly one element: the logo mark SVG.
   It was previously applied to 16 unrelated elements, which is what turned a
   mark into wallpaper. Scarcity is what makes it read as a mark. */
:root { --logo-grad-from: #4FC3F7; --logo-grad-to: #1565C0; }

/* ─── Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--text);
  font-size: var(--t-body-m);
  font-weight: var(--w-reg);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
@media (min-width: 768px) { body { font-size: var(--t-body); } }

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Blue is the action colour. Every link is blue; nothing decorative is. */
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-press); }

/* Semibold headings, not extra-bold — the Uthao reference's elegance comes
   from weight 600 given air, where 800 reads as shouting. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: var(--w-semi);
  color: var(--ink);
  margin: 0;
  line-height: 1.18;
  letter-spacing: var(--tr-loud);
  text-wrap: balance;
}
p { margin: 0; }

/* One global focus rule. Nothing on the page is discoverable by hover alone. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
::selection { background: var(--amber-tint); color: var(--ink); }

/* Every count, code and figure uses tabular figures so columns align. */
.tnum { font-variant-numeric: tabular-nums; }

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