/* ============================================================================
   TRADE HANDY AUSTRALIA — th-core.css
   THE single source of truth for the platform's face.
   10 Jul 2026 · Poseidon deep-navy · teal roof · GOLD as the mark of trust.

   Before this file, 6 different :root blocks drifted across 62 pages and a
   colour change meant 62 edits. Now it means one.

   Load order on every page:
       <link rel="stylesheet" href="th-core.css">     <- tokens + components
       <style> ...page-specific overrides... </style>  <- still wins
   ========================================================================== */

:root{
  /* ---- SURFACE (Poseidon) -------------------------------------------- */
  --ink:      #0c2438;   /* page bed              */
  --ink2:     #081a28;   /* deeper wells, insets  */
  --ink3:     #061320;   /* modal scrim base      */
  --panel:    #15324c;   /* cards                 */
  --panel2:   #1b3d5a;   /* raised cards, hovers  */
  --line:     rgba(255,255,255,.08);
  --line2:    rgba(255,255,255,.15);
  --line3:    rgba(255,255,255,.24);

  /* ---- TYPE ---------------------------------------------------------- */
  --tx:       #eef3f5;   /* body                  */
  --tx2:      #c5d2da;   /* secondary             */
  --mut:      #94a2ab;   /* muted / captions      */
  --tx-dark:  #04201c;   /* text on bright fills  */

  /* ---- BRAND --------------------------------------------------------- */
  --teal:     #00b8bb;   /* Brand Package primary */
  --teal2:    #00a3a6;   /* Brand Package shade   */
  --blue:     #3b82f6;   /* legacy UI-signal blue. Being retired — see --steel */

  /* ── LEGACY COMPAT (added 10 Jul 2026) ───────────────────────────────────
     36 pages call var(--x) on tokens that NO stylesheet they link declares.
     A var() with no fallback that names an undeclared token is invalid at
     computed-value time — the declaration is DROPPED. Silently. No console
     error. Those colours have been dead on the live site, not wrong-looking.
     Found by `_fl-repair.py` unresolved_vars(); it now gates the build.

     Values below are the ones these tokens ACTUALLY held in the stylesheets
     that used to declare them (th-public.css / th-theme.css). They are copied,
     not chosen — restoring intent, not redesigning. Retire them page by page. */
  --red:      #f56b6b;   /* ≠ --bad (#ef5a5a). Collapse to one --danger later. */
  --green:    #25c26e;   /* ≠ --ok  (#00e0a8). Same.                          */
  --txt:      var(--tx); /* typo for --tx: always `color:var(--txt)` on ink.   */
  --mut2:     var(--mut);
  --poseidon: var(--ink);
  --glass:    linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  --max:      1080px;
  --rs:       12px;
  /* NOT declared, on purpose: --gray, --bar.
     No stylesheet ever defined them, so there is no "previous value" to restore
     and I will not invent one. --gray is the background of a "not interested"
     status pill; --bar is unused in HTML. Both need a decision, not a guess. */

  /* ── SUPPORTING COLOUR (added 10 Jul 2026, approved by Sean) ──────────────
     --steel is the marble's blue: muted, deep, institutional. It carries
     everything that INFORMS. Teal carries everything you PRESS.
     ΔE ≈ 162 apart, so they never read as a mistake.
     5.87:1 on --ink2. Replaces #3b82f6 in the teal→blue gradients: that
     bright blue is a notification-badge blue and is what made the site look
     like an app instead of an institution. */
  --steel:    #669BBC;
  --steel-lo: rgba(102,155,188,.45);
  /* accent tokens promoted from page drift (11 Jul 2026) — exact prior values,
     so promoting them changes NOTHING visually; it just gives them one home. */
  --blue-tx:  #7fb0ef;   /* light-blue tag / pill text on a tinted background */
  --slate:    #5b6670;   /* deeper muted steel-grey — faint borders and labels */
  --violet:   #9f7aea;   /* violet accent — integrations, AI badges */
  --mint:     #5dcaa5;   /* mint success accent — won / positive states */

  /* ── CRIMSON — FILL ONLY. NEVER TEXT, NEVER A BORDER. ────────────────────
     #780000 on --ink is 1.51:1. As text or a hairline it is INVISIBLE, and
     reads as black to everyone else. It works only as a solid mass with
     white on top (10.44:1) or gold on top (5.39:1).
     One crimson element per page, maximum. It is for a warning that costs
     somebody money. Use it twice and it stops meaning anything. */
  --crimson:    #780000;
  --crimson-tx: #eef3f5;   /* the only text permitted on crimson */

  /* Status TEXT variants. The existing --ok/--bad are FILLS; these are the
     legible text colours that were previously hardcoded on 36 pages. */
  --ok-tx:    #8ff0bd;   /* 12.93:1 on --ink2 */
  --bad-tx:   #f9a3a3;   /*  9.08:1 on --ink2 */

  --gold-hair: rgba(201,174,93,.22);   /* the hairline. Gold's real job.
                                          NOT --gold-line (.42) — that is the
                                          border on earned/verified surfaces. */

  /* ---- GOLD — the trust mark ----------------------------------------- */
  /* Reserved. Gold means: verified, escrow-held, premium, earned.
     Never decorative. If it's gold, something is guaranteed.            */
  --gold:      #C9AE5D;
  --gold-lo:   #A8904A;
  --gold-hi:   #E3CC85;
  --gold-soft: rgba(201,174,93,.12);
  --gold-line: rgba(201,174,93,.42);
  --gold-glow: 0 0 24px rgba(201,174,93,.34);
  --grad-gold: linear-gradient(120deg,#E3CC85,#C9AE5D 55%,#A8904A);
  /* legacy alias — 41 pages ship --amber; keep them working */
  --amber:     var(--gold);   /* alias — same colour, legacy name on 41 pages */

  /* ---- STATE --------------------------------------------------------- */
  --ok:       #00e0a8;
  --warn:     #f0a83c;
  --bad:      #ef5a5a;

  /* ---- FILLS --------------------------------------------------------- */
  --grad:      linear-gradient(120deg,#00b8bb,var(--steel));
  --grad-soft: linear-gradient(120deg,rgba(0,184,187,.14),rgba(102,155,188,.10));

  /* ---- SHAPE & MOTION ------------------------------------------------ */
  --r:    16px;
  --r-sm: 12px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow:    0 18px 40px -18px rgba(0,0,0,.65);
  --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.75);
  --ease: cubic-bezier(.22,.61,.36,1);
  --t:    .2s var(--ease);

  /* ---- TYPE SCALE ---------------------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

/* ============================================================================
   BASE
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--font-body);
  background:var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:54px 54px;
  background-attachment:scroll;
  color:var(--tx);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.2}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold-soft);color:var(--gold-hi)}

/* Focus that a keyboard user can actually see. Accessibility is not optional. */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:4px;
}

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

/* ============================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:14px;
  padding:11px 18px;border:0;border-radius:var(--r-pill);
  cursor:pointer;transition:var(--t);white-space:nowrap;
}
.btn:disabled{opacity:.5;cursor:not-allowed}

.btn-p{background:var(--grad);color:var(--tx-dark);box-shadow:0 10px 26px -8px rgba(0,184,187,.5)}
.btn-p:hover:not(:disabled){transform:translateY(-2px)}

/* Gold button = the money action. Pay. Verify. Escrow. Nothing else. */
.btn-gold{background:var(--grad-gold);color:#241d07;box-shadow:0 10px 26px -8px rgba(201,174,93,.55)}
.btn-gold:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--gold-glow),0 12px 30px -8px rgba(201,174,93,.6)}

.btn-g{background:transparent;border:1px solid var(--line2);color:var(--tx)}
.btn-g:hover:not(:disabled){border-color:var(--teal)}

.btn-ghost{background:transparent;color:var(--mut)}
.btn-ghost:hover{color:var(--tx)}

.btn-sm{padding:8px 14px;font-size:13px}
.btn-lg{padding:14px 26px;font-size:15px}

/* ============================================================================
   SURFACES
   ========================================================================== */
.card{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  padding:22px;
}
.card-raised{background:var(--panel2);box-shadow:var(--shadow)}

/* Gold-edged card: verified tradie, funded escrow, premium tier. Earned only. */
.card-gold{
  border:1px solid var(--gold-line);
  background:linear-gradient(160deg,var(--gold-soft),transparent 62%),var(--panel);
}

/* ============================================================================
   BADGES — the trust vocabulary
   ========================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;letter-spacing:.01em;
  padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line2);color:var(--tx2);
}
.badge-teal{color:var(--teal);border-color:rgba(0,184,187,.4);background:var(--grad-soft)}
.badge-gold{color:var(--gold-hi);border-color:var(--gold-line);background:var(--gold-soft)}
.badge-ok{color:var(--ok);border-color:rgba(0,224,168,.4)}
.badge-warn{color:var(--warn);border-color:rgba(240,168,60,.4)}
.badge-bad{color:var(--bad);border-color:rgba(239,90,90,.4)}

/* ============================================================================
   FORMS
   ========================================================================== */
.input,input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=search],input[type=password],input[type=date],textarea,select{
  width:100%;
  background:var(--ink2);
  border:1px solid var(--line2);
  border-radius:var(--r-sm);
  color:var(--tx);
  font-family:var(--font-body);font-size:14.5px;
  padding:11px 13px;
  transition:var(--t);
}
.input:focus,input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(0,184,187,.16);
}
::placeholder{color:var(--mut)}
label{display:block;font-size:13px;font-weight:600;color:var(--tx2);margin-bottom:6px}

/* ============================================================================
   LAYOUT
   ========================================================================== */
.wrap{max-width:1140px;margin:0 auto;padding:26px 24px 80px}
.wrap-wide{max-width:1400px}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-sm{gap:8px}.gap{gap:14px}.gap-lg{gap:24px}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ============================================================================
   NAV
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:20;
  background:rgba(12,36,56,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;max-width:1140px;margin:0 auto;padding:14px 24px}
.brand{display:flex;align-items:center;gap:11px}
.logo-img{height:26px;width:auto;max-width:50vw;display:block;filter:drop-shadow(0 0 8px rgba(0,184,187,.4))}
.nav-links{display:flex;align-items:center;gap:18px;font-size:14px;color:var(--mut)}
.nav-links a{transition:var(--t)}
.nav-links a:hover{color:var(--tx)}
.nav-links a.on{color:var(--gold-hi)}

/* ============================================================================
   STATES — empty / loading. Honesty in the UI: never fake data.
   ========================================================================== */
.empty{
  text-align:center;padding:34px 18px;color:var(--mut);font-size:13.5px;
  border:1px dashed var(--line2);border-radius:var(--r-sm);
}
.skeleton{
  background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 50%,var(--panel) 75%);
  background-size:200% 100%;
  animation:th-shimmer 1.4s infinite;
  border-radius:var(--r-sm);
}
@keyframes th-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============================================================================
   UTILITIES
   ========================================================================== */
.mut{color:var(--mut)}
.tx2{color:var(--tx2)}
.gold{color:var(--gold-hi)}
.teal{color:var(--teal)}
.mono{font-variant-numeric:tabular-nums}
.hide{display:none !important}
@media(max-width:760px){.hide-sm{display:none !important}}
.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}