/* ==========================================================================
   Allanux house design tokens
   --------------------------------------------------------------------------
   These are the shared house values. Do not edit them per project.
   Project specific overrides live in the blocks below and are prefixed
   --t- (template).
   ========================================================================== */

:root {
  /* Colour ---------------------------------------------------------------- */
  --a-blue: #0181F5;
  --a-navy: #010F34;
  --a-body: #4D5765;
  --a-bg: #F5F8FC;
  --a-white: #FFFFFF;
  --a-line: #E4E9F2;
  --a-success: #0F9D58;
  --a-warning: #F4B400;
  --a-danger: #DB4437;

  /* Type ------------------------------------------------------------------ */
  --a-font-head: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --a-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --a-h1: clamp(2rem, 5vw, 3.5rem);
  --a-h2: clamp(1.5rem, 3.5vw, 2.25rem);
  --a-h3: clamp(1.15rem, 2.5vw, 1.5rem);
  --a-lh-tight: 1.15;
  --a-lh: 1.6;

  /* Space ----------------------------------------------------------------- */
  --a-1: .25rem;
  --a-2: .5rem;
  --a-3: .75rem;
  --a-4: 1rem;
  --a-6: 1.5rem;
  --a-8: 2rem;
  --a-12: 3rem;
  --a-16: 4rem;
  --a-24: 6rem;

  /* Shape ----------------------------------------------------------------- */
  --a-radius: 12px;
  --a-radius-lg: 20px;
  --a-radius-pill: 999px;
  --a-shadow: 0 2px 8px rgba(1, 15, 52, .06);
  --a-shadow-lg: 0 12px 32px rgba(1, 15, 52, .10);

  /* Layout ---------------------------------------------------------------- */
  --a-container: 1180px;
  --a-gutter: 20px;
}

/* ==========================================================================
   Webfonts: Barlow + Barlow Condensed, self-hosted
   --------------------------------------------------------------------------
   Latin subsets only, ~22 KB per weight, served from assets/fonts/ so the
   template keeps working offline from any plain file server. Paths are
   relative to this CSS file, so they resolve from the root and from pages/.
   ========================================================================== */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-condensed-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}

/* ==========================================================================
   Template layer: plumbing-bold-emergency
   --------------------------------------------------------------------------
   Art direction: trade signage. Deep ink navy, warm paper white, one signal
   red locked across every page. Barlow Condensed carries the display voice
   the way lettering carries a van; Barlow does the reading.
   ========================================================================== */

:root {
  /* Ink family: the dark surfaces. --t-ink is the base, -2 is raised panels
     on ink, -3 is hairlines and strokes on ink. */
  --t-ink: #0B1424;
  --t-ink-2: #13203A;
  --t-ink-3: #24334F;

  /* Paper family: the light surfaces. Warm, not blue, so the red reads hot. */
  --t-paper: #F5F4F0;
  --t-line: #E3E1D9;

  /* Signal red. #C81E0F carries white text at 5.7:1, so it is safe on solid
     buttons at any size. --t-red-deep (7.6:1 on white) is the version for
     small red text on light surfaces. Never lighten either without
     rechecking contrast. */
  --t-red: #C81E0F;
  --t-red-dark: #A3160A;
  --t-red-deep: #9A150A;
  --t-red-tint: #FBEAE7;

  /* The same accent role on ink surfaces, where the base red falls below
     3:1. #FF6A3C reads at 6.2:1 on --t-ink. */
  --t-flare: #FF6A3C;

  /* Text. Body on paper/white is 8.2:1. On ink: --t-on-dark 12.6:1,
     --t-on-dark-soft 7.1:1. */
  --t-body: #46505F;
  --t-on-dark: #CBD4E4;
  --t-on-dark-soft: #98A5BE;

  /* Focus ring: one systemic colour, visible on paper (3.7:1) and themed
     brighter on ink surfaces via .on-dark. */
  --t-focus: #0169C9;
  --t-focus-dark: #6FB1FF;

  /* Type. Condensed for display and numerals, Barlow for everything read. */
  --t-font-head: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --t-font-body: 'Barlow', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;

  /* Shape system: panels/cards/media 14px, buttons/inputs 9px, chips and
     tags full pill. Applied everywhere; do not mix in other radii. */
  --t-r-panel: 14px;
  --t-r-ctrl: 9px;

  --t-shadow: 0 1px 2px rgba(11, 20, 36, .05), 0 4px 14px rgba(11, 20, 36, .06);
  --t-shadow-lg: 0 2px 4px rgba(11, 20, 36, .06), 0 18px 44px rgba(11, 20, 36, .16);

  --t-header-h: 72px;

  /* The hazard stripe: the one decorative signature, used on the emergency
     call card, the closing band and the mobile call bar. Nowhere else. */
  --t-hazard: repeating-linear-gradient(-55deg,
      var(--t-red) 0 14px, var(--t-ink) 14px 28px);
}