/* ==========================================================================
   Neighborhood Cutz  ·  neighborhoodcutz.com

   Design and development by NORTH CODE LLC
   https://northcodellc.com  ·  hello@northcodellc.com

   Copyright (c) 2026 North Code LLC. All rights reserved.
   Original work, licensed to Neighborhood Cutz for use on this domain.
   Not to be copied, republished or adapted for another site without
   written consent.
   ========================================================================== */

/* TOKENS
   The fluid sizing engine plus every colour, type size and spacing value.
   Change a brand colour or the type scale here and it updates site-wide.
   Loaded first: every other stylesheet depends on these custom properties. */

/* ============================================================
   1. FLUID SIZING ENGINE
   Root font-size scales with viewport. Everything else is em.
   At 1440px viewport this resolves to exactly 16px.
   ============================================================ */
:root {
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 2560px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}
@media (min-width: 1921px) { :root { --size-font: 21.333px; } }
@media (max-width: 991px)  { :root { --size-container-ideal: 834; --size-container-min: 768px; --size-container-max: 991px; } }
@media (max-width: 767px)  { :root { --size-container-ideal: 600; --size-container-min: 480px; --size-container-max: 767px; } }
@media (max-width: 479px)  { :root { --size-container-ideal: 390; --size-container-min: 320px; --size-container-max: 479px; } }
/* ============================================================
   2. TOKENS
   ============================================================ */
body {
  --font-body: "Chivo Mono", ui-monospace, monospace;
  --font-display: "Archivo", Helvetica, Arial, sans-serif;

  --c-light: #fff;
  --c-dark: #000;
  --c-brand: #000000;        /* barber-pole red */
  --c-hover: #00deff;
  --c-line: #909090;
  --c-mute: rgba(0,0,0,.5);
  --c-open: #1c9c4a;

  --t-h-lg: 4.25em;
  --t-h-md: 3.25em;
  --t-tag: .75em;

  --pad-global: 2.5em;
  --pad-section: 8em;
  --gap-col: 1.25em;
  --gap-sm: 1.5em;
  --gap-md: 3em;
}
@media (max-width: 991px) { body { --t-h-lg: 3em; --t-h-md: 2.25em; --pad-section: 5em; } }
@media (max-width: 767px) { body { --t-h-lg: 2.25em; --t-h-md: 1.75em; --pad-global: 1.25em; --pad-section: 3.5em; } }