/* ============================================================
   voco Melbourne Central · Design tokens v0.2
   Source: voco Visual Identity Guide (v1.4, 2022, 151pp)
   Every value is from the guide unless marked [ours]: a web
   necessity the print-first guide does not define.
   ============================================================ */

/* ---------- Fonts (Butler: project fonts/. Founders Grotesk:
   web licence expected; guide-approved substitute is Arial, so
   the stack falls back correctly until the files arrive.) ---- */
/* ---------- Founders Grotesk (Klim web licence, invoice 26070551, active 13 Jul 2026) ----------
   The working sans. Licensed woff2s only; the Klim TRIAL files must never ship. ---------- */
@font-face{font-family:'Founders Grotesk';src:url('fonts/founders-grotesk-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Founders Grotesk';src:url('fonts/founders-grotesk-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Founders Grotesk';src:url('fonts/founders-grotesk-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Founders Grotesk';src:url('fonts/founders-grotesk-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

@font-face{font-family:'Butler';src:url('fonts/Butler-Free-Med.woff2') format('woff2'),url('fonts/Butler-Free-Med.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Butler';src:url('fonts/Butler-Free-Bd.woff2') format('woff2'),url('fonts/Butler-Free-Bd.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* ---------- Colour · primary palette (guide p54-55) ---------- */
  --honey-yellow:#F8B90D;   /* signature; accents, the Dash, discovery moments */
  --jade-black:#121212;     /* ALWAYS the digital black */
  --warm-white:#FCFAF7;     /* base background for all digital applications */
  --sand:#F3EEE7;           /* deeper warm tint for feature panels [ours] */
  --dove-grey:#73736F;      /* supporting headlines, annotations, disclaimers ONLY */
  --white:#FFFFFF;          /* print value; cards may use it over warm white [ours] */
  /* Honey Gold = foil/metallic, PRINT ONLY. No hex exists; never fake it on web. */

  /* ---------- Derived tints [ours] (jade black at set opacities,
     so hairlines and surfaces stay in the palette) ---------- */
  --ink-80:rgba(18,18,18,.8);
  --ink-60:rgba(18,18,18,.6);
  --ink-40:rgba(18,18,18,.4);
  --ink-20:rgba(18,18,18,.2);
  --ink-12:rgba(18,18,18,.12);
  --ink-06:rgba(18,18,18,.06);
  --ink-03:rgba(18,18,18,.03);
  --yellow-15:rgba(248,185,13,.15);
  --yellow-35:rgba(248,185,13,.35);

  /* ---------- Semantic aliases [ours] ---------- */
  --bg:var(--warm-white);
  --ink:var(--jade-black);
  --accent:var(--honey-yellow);
  /* a11y 28 Jul: working muted TEXT tone darkened from Dove Grey #73736F to pass WCAG AA (4.5:1)
     on every site background incl. the sand tint (#F3EEE7 was 4.13:1). Dove Grey itself is
     unchanged as the brand value for non-text uses. */
  --muted:#6B6B67;
  --line:var(--ink-12);
  --line-strong:var(--ink-20);
  --line-soft:var(--ink-06);

  /* ---------- Functional colour [ours] · form validation only.
     The brand palette carries no semantic colours; these two are
     web-functional additions, warm-cast to sit with Honey Yellow,
     and appear nowhere except validation messages + borders. ---- */
  --error:#A03222;
  --error-tint:rgba(160,50,34,.07);
  --success:#2E5941;

  /* ---------- Type · families (guide p35-36, substitutes p48-49) ---------- */
  --serif:'Butler',Georgia,serif;                 /* headlines; sentence case; NEVER uppercase */
  --sans:'Founders Grotesk',Arial,sans-serif;     /* body + UI; UPPERCASE only for short labels */

  /* ---------- Type · weights ---------- */
  --serif-medium:500;
  --serif-bold:700;
  --sans-light:300;
  --sans-regular:400;
  --sans-medium:500;
  --sans-semibold:600;

  /* ---------- Type · setting rules (guide p37) ---------- */
  --leading-headline:1.2;        /* 120% of text size */
  --tracking-headline:.005em;    /* +5 tracking */
  --leading-body:1.6;            /* [ours] web body leading */
  --tracking-label:.12em;        /* [ours] uppercase FG labels */

  /* ---------- Type · ramp. The guide's proportional hierarchy
     (headline 100% · display-sub 50% · large body 36% · subhead 32%
     · supporting 23% · xs 16%, p39) mapped to a responsive web
     scale honouring Butler's 13pt (~17px) floor [ours: px values]. */
  --fs-display:clamp(52px,7vw,84px);     /* Display · Butler Bold · hero statements */
  --fs-h1:clamp(40px,5vw,60px);          /* H1 · Butler Bold */
  --fs-h2:clamp(30px,3.6vw,42px);        /* H2 · Butler Medium */
  --fs-h3:clamp(24px,2.4vw,28px);        /* H3 · Butler Medium */
  --fs-h4:21px;                          /* H4 · Butler Medium (never below 17px) */
  --fs-lead:clamp(19px,2vw,22px);        /* Lead · FG Light */
  --fs-subhead:18px;                     /* Subhead · FG Medium */
  --fs-body:17px;                        /* Body · FG Regular (16px floor on mobile) */
  --fs-small:15px;                       /* Small · FG Regular */
  --fs-label:13px;                       /* Label · FG Medium · uppercase */
  --fs-caption:13px;                     /* Caption · FG Regular · Dove Grey */
  --fs-legal:12px;                       /* Legal · FG Regular · Dove Grey */

  /* ---------- The Dash (guide p43) ---------- */
  --dash-stroke:2px;
  --dash-width:25%;                 /* 1/4 the widest line it anchors */
  --dash-color:var(--honey-yellow); /* honey yellow or black. NEVER white */

  /* ---------- Layout (guide p129-130) ---------- */
  --grid-cols:12;
  --margin-ratio:6.6667vw;          /* margins = 1/15 of format width */
  --gutter:24px;                    /* 20-25% of column width at 1200px [ours: px] */
  --content-max:1200px;             /* [ours] */
  --measure:640px;                  /* [ours] comfortable reading measure */

  /* ---------- Spacing scale [ours] · generous by default ---------- */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;--s11:160px;

  /* ---------- Controls [ours] ---------- */
  --control-h:56px;                 /* inputs + buttons, unhurried */
  --control-h-sm:44px;
  --control-pad:22px;
  --radius:0px;                     /* flat + editorial; no rounded default */
  --radius-pill:999px;              /* pills only */

  /* ---------- Focus [ours, WCAG] ---------- */
  --focus-ring:2px solid var(--honey-yellow);
  --focus-offset:3px;

  /* ---------- Motion [ours] · calm, never springy ---------- */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:150ms;
  --dur-med:280ms;
  --dur-slow:450ms;

  /* ---------- Elevation [ours] · one soft editorial shadow ---------- */
  --shadow-card:0 24px 60px -32px rgba(18,18,18,.28);
  --shadow-pop:0 32px 80px -30px rgba(18,18,18,.4);
}

/* ============================================================
   Accent systems (guide p57-59)
   Bold  = contemporary: Jade Black blocking, yellow thread.
   Bright = light touch: Warm White base, yellow pops, black for
   text + logo only. Mixing per-surface is guide-sanctioned.
   ============================================================ */
.mode-bold{--surface:var(--jade-black);--surface-ink:var(--warm-white)}
.mode-bright{--surface:var(--warm-white);--surface-ink:var(--jade-black)}

/* ---------- The Dash · utility ---------- */
.dash{width:var(--dash-width);min-width:48px;height:var(--dash-stroke);background:var(--dash-color);border:0;margin:26px auto}
.dash.black{background:var(--jade-black)}
.dash.left{margin-left:0}

/* ---------- Type ramp · utilities ---------- */
.t-display{font-family:var(--serif);font-weight:var(--serif-bold);font-size:var(--fs-display);line-height:1.12;letter-spacing:var(--tracking-headline)}
.t-h1{font-family:var(--serif);font-weight:var(--serif-medium);font-size:var(--fs-h1);line-height:var(--leading-headline);letter-spacing:var(--tracking-headline)}
.t-h2{font-family:var(--serif);font-weight:var(--serif-medium);font-size:var(--fs-h2);line-height:var(--leading-headline);letter-spacing:var(--tracking-headline)}
.t-h3{font-family:var(--serif);font-weight:var(--serif-medium);font-size:var(--fs-h3);line-height:1.28}
.t-h4{font-family:var(--serif);font-weight:var(--serif-medium);font-size:var(--fs-h4);line-height:1.32}
.t-lead{font-family:var(--sans);font-weight:var(--sans-light);font-size:var(--fs-lead);line-height:1.55}
.t-subhead{font-family:var(--sans);font-weight:var(--sans-medium);font-size:var(--fs-subhead);line-height:1.45}
.t-label{font-family:var(--sans);font-weight:var(--sans-medium);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--tracking-label)}
.t-body{font-family:var(--sans);font-weight:var(--sans-regular);font-size:var(--fs-body);line-height:var(--leading-body)}
.t-small{font-family:var(--sans);font-weight:var(--sans-regular);font-size:var(--fs-small);line-height:1.55}
.t-caption{font-family:var(--sans);font-weight:var(--sans-regular);font-size:var(--fs-caption);line-height:1.5;color:var(--muted)}
.t-legal{font-family:var(--sans);font-weight:var(--sans-regular);font-size:var(--fs-legal);line-height:1.5;color:var(--muted)}