/* ============================================================
   ALTIDA — Design tokens — CANON (sole source of truth)
   This file is the ONE authoritative copy of the Altida design
   tokens: colors, type, spacing, radii, shadow, motion, brand assets.
   Every other tokens.css in this project (e.g. develop/tokens.css) is
   a downstream copy whose token values must match this file exactly.
   To change a token: edit THIS file first, then copy it forward.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   FONTS — three-face system
   ──────────────────────────
   1. LOVELO BLACK    — DISPLAY ONLY. Reserve for type 32px+: hero,
                        section titles, marketing-tile model lockups,
                        oversized stat numbers, the wordmark. Below
                        32px Lovelo gets muddy and shouty — use Inter
                        caps instead. Always uppercase, weight 900,
                        +0.06em–0.08em tracking. Self-hosted .otf.

   2. INTER (caps)    — the structural face. Card titles, spec-card
                        model numbers, h3/h4, eyebrows, nav, button
                        labels, footer column heads, status / badge
                        text, spec-row labels. Always uppercase,
                        500/600/700/800, tracked +0.06em–0.24em.
                        Does the heavy lifting between Lovelo display
                        moments and Aller body.

   3. ALLER           — the running voice. Body copy, captions,
                        contact strips, phone numbers, form input,
                        descriptions. Light for delicate captions;
                        Regular for body; Bold for inline emphasis.
                        Self-hosted .ttf.
   ──────────────────────────────────────────────────────────── */

/* Inter — self-hosted variable font (one file covers weights 100–900, latin subset).
   Replaces the former render-blocking Google Fonts @import (PageSpeed pass 2026-07-06);
   non-latin glyphs fall back down the --font-sans stack. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/Inter-Variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lovelo Black — self-hosted .otf. The display face for ALTIDA. */
@font-face {
  font-family: 'Lovelo Black';
  src: url('assets/fonts/Lovelo_Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Aller — self-hosted. Body face; matches the contact strip on the
   marketing tiles ("Visit altida.co.uk · Call 01246 261915").
   Six files in /assets/fonts/: Regular, Bold, Italic, BoldItalic,
   LightItalic, Display. Light upright is not part of this family
   release — use LightItalic only as italic, or AllerDisplay where
   a delicate weight is needed. */
@font-face {
  font-family: 'Aller';
  src: url('assets/fonts/Aller_Rg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aller';
  src: url('assets/fonts/Aller_It.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Aller';
  src: url('assets/fonts/Aller_Bd.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aller';
  src: url('assets/fonts/Aller_BdIt.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Aller';
  src: url('assets/fonts/Aller_LtIt.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Aller Display — the heavier display cut of Aller. Used for
   contact-strip dividers, oversized callouts in body context,
   and the rare body-context emphasis where Lovelo would be too
   loud. Single weight. */
@font-face {
  font-family: 'Aller Display';
  src: url('assets/fonts/AllerDisplay.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Brand color ───────────────────────────────────────── */
  --altida-black:        #0A0A0A;   /* near-black, used for type and ground */
  --altida-pure-black:   #000000;   /* logo lockup, photography frames */
  --altida-yellow:       #FFEC00;   /* hi-vis safety yellow — primary accent */
  --altida-yellow-warm:  #FFD600;   /* shadow / pressed state */
  --altida-white:        #FFFFFF;
  --altida-bone:         #F6F5F0;   /* soft off-white panel */

  /* Greyscale (warm-neutral, slight yellow undertone) */
  --grey-950:  #0A0A0A;
  --grey-900:  #141414;
  --grey-800:  #1F1F1F;
  --grey-700:  #2E2E2E;
  --grey-600:  #4A4A4A;
  --grey-500:  #6E6E6E;
  --grey-400:  #9A9A9A;
  --grey-300:  #C7C6C2;
  --grey-200:  #E4E3DE;
  --grey-100:  #EFEEEA;
  --grey-50:   #F6F5F0;

  /* Functional / status (industrial palette — high contrast on black) */
  --status-go:      #2BB673;   /* available / operational */
  --status-warn:    #FFB400;   /* caution */
  --status-stop:    #E63946;   /* unavailable / error */
  --status-info:    #2D7DD2;

  /* Semantic surfaces */
  --surface-page:        var(--altida-white);
  --surface-panel:       var(--altida-bone);
  --surface-inverse:     var(--altida-black);
  --surface-accent:      var(--altida-yellow);
  --hairline:            var(--grey-200);
  --hairline-strong:     var(--grey-300);

  /* Text */
  --ink-primary:    var(--altida-black);
  --ink-secondary:  var(--grey-600);
  --ink-muted:      var(--grey-500);
  --ink-on-dark:    var(--altida-white);
  --ink-on-yellow:  var(--altida-black);

  /* ─── Type ──────────────────────────────────────────────── */
  /* DISPLAY — Lovelo Black. Headlines, model numbers, hero, section
     starters. Uppercase, weight 900, tracked +0.08em. */
  --font-display: 'Lovelo Black', 'Archivo Black', 'Inter', system-ui, sans-serif;

  /* LOCKUP / UI — Inter, ALWAYS uppercase + tracked. "CRANE HIRE",
     "TRANSPORT", nav, buttons, eyebrows, footer column heads. */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;

  /* BODY — Aller (Regular / Italic / Bold / BoldItalic / LightItalic).
     Running copy, captions, contact strips, phone numbers, form
     copy. The face from the marketing-tile footer. */
  --font-body:    'Aller', 'Inter', system-ui, -apple-system, sans-serif;

  /* MONO — kept as a fallback for tabular numerics. Optional;
     Aller's tnum is usually preferable. */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (modular, slightly tightened for industrial feel) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-96: 6rem;
  --fs-128: 8rem;

  /* Tracking */
  --track-tightest: -0.04em;
  --track-tight:    -0.02em;
  --track-normal:   0;
  --track-wide:     0.04em;
  --track-wider:    0.08em;   /* "CRANE HIRE" subhead lockup */
  --track-widest:   0.16em;   /* eyebrow labels */

  /* Line-height */
  --lh-tight:   1;
  --lh-snug:    1.15;
  --lh-base:    1.45;
  --lh-relaxed: 1.6;

  /* ─── Spacing (4-pt base) ───────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* ─── Radii — squared & industrial ──────────────────────── */
  --radius-0:  0;        /* default — most components are square-cornered */
  --radius-1:  2px;      /* tiny chips */
  --radius-2:  4px;      /* tags */
  --radius-3:  6px;      /* inputs, soft buttons */
  --radius-pill: 999px;

  /* ─── Borders ───────────────────────────────────────────── */
  --border-hair:   1px;
  --border-rule:   2px;
  --border-bold:   4px;   /* yellow accent rule */

  /* ─── Shadow — minimal, mostly used inverted on dark ─── */
  --shadow-1: 0 1px 2px rgba(10,10,10,0.06), 0 1px 1px rgba(10,10,10,0.04);
  --shadow-2: 0 6px 16px -4px rgba(10,10,10,0.10), 0 2px 4px rgba(10,10,10,0.06);
  --shadow-3: 0 24px 48px -16px rgba(10,10,10,0.18), 0 4px 8px rgba(10,10,10,0.08);
  --shadow-yellow: 0 8px 24px -8px rgba(255,236,0,0.45);

  /* ─── Focus ─────────────────────────────────────────────── */
  --focus-ring:  0 0 0 3px rgba(255, 236, 0, 0.55);
  --focus-ring-dark: 0 0 0 3px rgba(255, 236, 0, 0.85);
  --focus-outline: 2px solid var(--altida-black);
  --focus-outline-offset: 3px;

  /* ─── Motion ────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 0.68, 0.06);
  --ease-mech:  cubic-bezier(0.65, 0, 0.35, 1);   /* mechanical, crane-arm feel */
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;

  /* ─── Layout ────────────────────────────────────────────── */
  --container:   1280px;
  --container-wide: 1440px;
  --gutter:      clamp(1rem, 4vw, 2rem);

  /* ─── Brand motif tokens ────────────────────────────────── */
  --slash-angle: -22deg;     /* corner-slash diagonals on marketing tiles */
  --rule-yellow: var(--border-bold) solid var(--altida-yellow);
}

/* ============================================================
   Type primitives — utility classes for the system
   ============================================================ */

.t-display-xl,
.t-display-l,
.t-display-m,
.t-display-s {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: 0.08em;   /* Lovelo Black needs positive tracking */
  color: var(--ink-primary);
  text-transform: uppercase;
}
.t-display-xl { font-size: clamp(3.5rem, 8vw, var(--fs-128)); }
.t-display-l  { font-size: clamp(2.5rem, 6vw, var(--fs-96));  }
.t-display-m  { font-size: clamp(2rem, 4.5vw, var(--fs-64));  }
.t-display-s  { font-size: clamp(1.5rem, 3vw, var(--fs-40));  }

/* H1 / H2 stay on Lovelo — they're display-scale (32px+).
   H3 / H4 drop to Inter caps so Lovelo doesn't get muddy at small sizes. */
.t-h1, .t-h2 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--lh-snug);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-primary);
}
.t-h3, .t-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-primary);
}

/* Inter caps subhead — "CRANE HIRE & TRANSPORT SERVICES, DERBYSHIRE"
   pattern. Use under display titles. */
.t-subhead {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-14);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-primary);
  line-height: 1.4;
}
.t-h1 { font-size: var(--fs-40); }
.t-h2 { font-size: var(--fs-32); }
.t-h3 { font-size: var(--fs-24); }
.t-h4 { font-size: var(--fs-20); }

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-13);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: var(--ink-primary);
}

.t-lockup {
  /* Inter caps — used under the wordmark for "CRANE HIRE" / "TRANSPORT" */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-14);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-primary);
}

/* Aller body sizes. Aller Light reads delicate at small sizes —
   use Regular at 14px+, Light only at 12–14px for captions /
   contact strips. */
.t-body-l { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-18); line-height: var(--lh-relaxed); color: var(--ink-primary); }
.t-body   { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-16); line-height: var(--lh-base);    color: var(--ink-primary); }
.t-body-s { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-14); line-height: var(--lh-base);    color: var(--ink-secondary); }
.t-caption{ font-family: var(--font-body); font-weight: 300; font-size: var(--fs-12); line-height: var(--lh-base);    color: var(--ink-muted);   letter-spacing: var(--track-wide); }

/* Contact strip: "Visit altida.co.uk · Call 01246 261915 · Email
   sales@altida.co.uk" — Aller Light, slightly tracked. */
.t-contact {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-14);
  letter-spacing: 0.02em;
  color: var(--ink-primary);
}
.t-contact b { font-weight: 700; }

/* Numerics — Aller Regular with tabular figures. Use for phone
   numbers, tonnes, metres, model codes in body context. */
.t-num {
  font-family: var(--font-body);
  font-weight: 400;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.t-spec {
  /* Inter caps — Lovelo gets muddy at 12px. Use sans for spec-row labels. */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-primary);
}

/* ============================================================
   Brand motifs — slashes, rules, tile pattern
   ============================================================ */

.altida-rule {
  height: var(--border-bold);
  width: 48px;
  background: var(--altida-yellow);
  display: block;
}
.altida-rule--vertical {
  height: 1.2em;
  width: var(--border-bold);
}
/* Diagonal corner slash — the recurring marketing motif */
.altida-corner-slash {
  position: relative;
  isolation: isolate;
}
.altida-corner-slash::before,
.altida-corner-slash::after {
  content: '';
  position: absolute;
  width: 28%;
  aspect-ratio: 1;
  background: var(--altida-yellow);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 0;
}
.altida-corner-slash::before { top: 0; left: 0; }
.altida-corner-slash::after  { bottom: 0; right: 0; transform: rotate(180deg); }

/* Triangular tile pattern (subtle, used as section background) */
.altida-tile-pattern {
  background-color: var(--altida-white);
  background-image:
    linear-gradient(60deg, var(--grey-100) 25%, transparent 25.5%, transparent 74.5%, var(--grey-100) 75%),
    linear-gradient(-60deg, var(--grey-100) 25%, transparent 25.5%, transparent 74.5%, var(--grey-100) 75%);
  background-size: 28px 48px;
  background-position: 0 0, 14px 24px;
}

/* Yellow underline accent (used on section headings, e.g. "Welcome to Altida Crane Hire") */
.altida-bar-heading {
  border-left: var(--border-bold) solid var(--altida-yellow);
  padding-left: var(--space-4);
}

/* Reset that pairs with the system */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}