/* Theme for iceberg-airconditioning. This file belongs to this client alone.
   Edit it freely: nothing else reads it. */

/* ============================================================
   GoodGround — trade art direction
   One layout skeleton, a different identity per trade.
   Set data-trade on <html>. Everything else follows from tokens.

   Trades are cut from the REAL prospect list (Cape Town industrial
   areas), not from assumptions: automotive dominates, then fabrication,
   upholstery and cold (aircon / refrigeration).

   Fonts avoid the reflex defaults (Inter, Fraunces et al) that make every
   AI-built site look like every other one.

   Colours are hex on purpose, not OKLCH. A large share of this
   audience is on older budget Android handsets and nothing here is
   worth a rendering risk on a demo that has to land first time.
   ============================================================ */

:root {
  /* spacing, 4px base */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 14px;

  /* type scale, 1.25 ratio */
  --fs-xs: 0.8rem;    --fs-sm: 0.9rem;    --fs-body: 1rem;
  --fs-lg: 1.25rem;   --fs-xl: 1.563rem;  --fs-2xl: 1.953rem;
  --fs-3xl: 2.441rem; --fs-4xl: 3.052rem;
  --fs-hero: clamp(2.5rem, 6vw, 4.25rem);

  --lh-body: 1.6;
  --lh-display: 1.02;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 200ms;

  --shadow-1: 0 1px 2px rgba(10, 10, 12, 0.06), 0 2px 8px rgba(10, 10, 12, 0.04);
  --shadow-2: 0 4px 12px rgba(10, 10, 12, 0.10), 0 12px 32px rgba(10, 10, 12, 0.08);

  /* the WhatsApp green is fixed, it is a brand mark and must read as one */
  --whatsapp: #25d366;
}

/* ---------- AUTOMOTIVE ----------
   Panel beaters, spray painters, auto electrical, auto trim.
   The spray booth: deep graphite, one signal amber.

   Amber, not red. Red-and-black is the first-order category reflex for
   anything automotive and it lands us in the exact cliche we're paid to
   escape. Amber earns its place for a better reason: it is the colour of
   the stars in their Google rating, so the accent and the single most
   persuasive object on the page become the same thing. */

/* ---------- FABRICATION ----------
   Welding, steelworks, engineering workshops.
   Raw concrete and mill steel, molten orange. Deliberately lighter than
   automotive so the two dark trades don't read as the same template. */

/* ---------- UPHOLSTERY ----------
   Furniture and auto trim. Tactile and warm: oat canvas, leather tan,
   editorial serif. This trade is craft, so it should feel handmade. */

/* ---------- COLD ----------
   Vehicle aircon, refrigeration, HVAC. Built to the CoolAir reference:
   Manrope, deep navy, periwinkle, pale blue panels, 8px radii.

   Two colours from that reference are corrected, because it fails WCAG on
   both. Its periwinkle #678fd5 gives white text only 3.25:1 and its body
   grey #7b8893 only 3.63:1, when AA needs 4.5. Darkened to #4a72c0 (4.71)
   and #55616d (4.65 on the darkest panel). They read as the same colours;
   they are simply legible now. */

/* ---------- GENERAL — fallback for any other trade ---------- */

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

[data-trade="cold"] {
  --canvas:      #ffffff;
  --surface:     #f4f7fb;   /* pale blue-white section */
  --surface-2:   #d7dde9;   /* blue-grey section */
  --deep:        #0a2540;   /* navy: testimonial band, footer */
  --deep-2:      #234982;   /* mid navy: icon tiles */
  --on-deep:     #ffffff;
  --on-deep-muted:#a8bdd4;
  --ink:         #0a2540;
  --ink-muted:   #55616d;
  --border:      #e2e8f1;
  --accent:      #4a72c0;
  --accent-hover:#3d61a8;
  --accent-soft: #eaf0fa;
  --accent-2:    #678fd5;   /* the original periwinkle, decorative fills only */
  --on-accent:   #ffffff;
  --star:        #e8a33d;

  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   16px;

  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.03em;
  --display-transform: none;
}