/* ==========================================================================
   bricks-variables.css

   Preview mirror of bricks-variables.json. The JSON is the source of truth:
   it is imported in Bricks > Settings > Variables Manager and the tokens live
   there on production. Change a value in the JSON first, then copy it here.
   Never the other way round.

   Zinergo identity (2026-10-14): black field, paper text, one amber accent
   sampled from the logo (#F9B807). Saira (display, labels) + Archivo (body),
   self-hosted in core-classes.css. Every value in classes uses
   var(--token), never a hardcoded number.
   ========================================================================== */

:root {

  /* --- Spacing ----------------------------------------------------------- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-ml: 20px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* --- Texts ------------------------------------------------------------- */
  --text-3xs: 0.625rem;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-s: 0.875rem;
  --text-base: 1rem;
  --text-l: clamp(1.05rem, calc(1.05rem + 0.0024 * (100vw - 360px)), 1.20rem);
  --text-xl: clamp(1.25rem, calc(1.25rem + 0.0040 * (100vw - 360px)), 1.50rem);
  --text-2xl: clamp(1.75rem, calc(1.75rem + 0.0104 * (100vw - 360px)), 2.40rem);
  --text-3xl: clamp(1.90rem, calc(1.90rem + 0.0160 * (100vw - 360px)), 2.90rem);
  --text-4xl: clamp(2.35rem, calc(2.35rem + 0.0168 * (100vw - 360px)), 3.40rem);
  --text-5xl: clamp(2.50rem, calc(2.50rem + 0.0318 * (100vw - 360px)), 4.50rem);
  --text-6xl: clamp(3.00rem, calc(3.00rem + 0.0557 * (100vw - 360px)), 6.50rem);

  /* --- Gaps/Padding ------------------------------------------------------ */
  --padding-section-x: clamp(1.00rem, calc(1.00rem + 0.0160 * (100vw - 360px)), 2.00rem);
  --padding-section-y: clamp(4.50rem, calc(4.50rem + 0.0560 * (100vw - 360px)), 8.00rem);
  --padding-section: var(--padding-section-y) var(--padding-section-x);
  --grid-gap: var(--space-xl) var(--space-l);
  --grid-gap-s: var(--space-l) var(--space-m);
  --card-gap: var(--space-s);
  --card-padding: var(--space-l);
  --content-gap: var(--space-m);
  --container-gap: var(--space-2xl);

  /* --- Sizes ------------------------------------------------------------- */
  --container-width: 1366px;
  --container-min-width: 360px;
  --content-width: var(--container-width);
  --text-measure: 62ch;
  --header-height: 72px;
  --button-height: 52px;
  --icon-size: 18px;
  --terminal-size: 14px;
  --hero-measure: 16ch;
  --submenu-width: 22rem;
  --placeholder-min-height: 7rem;
  --bleed-offset: calc((100vw - min(var(--container-width), 100vw - 2 * var(--padding-section-x))) / 2);
  --toggle-bar-offset: 6px;
  --bullet-offset: 0.8em;
  --heading-measure: 18ch;
  --service-measure: 52ch;
  --footer-measure: 36ch;

  /* --- Styles ------------------------------------------------------------ */
  --text-font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --heading-font-family: "Saira", "Archivo", system-ui, sans-serif;
  --text-line-height: 1.65;
  --heading-line-height: 1.04;
  --text-font-weight: 400;
  --heading-font-weight: 600;
  --label-font-family: "Saira", "Archivo", system-ui, sans-serif;
  --font-stretch-condensed: 80%;
  --font-stretch-normal: 100%;
  --font-stretch-wide: 112%;
  --tracking-tight: -0.025em;
  --tracking-label: 0.08em;
  --display-line-height: 0.98;
  --label-line-height: 1.2;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-solid: 1;

  /* --- Colors ------------------------------------------------------------ */
  --color-ink: #0E0E0C;
  --color-ink-raised: #191915;
  --color-paper: #F2F0EA;
  --color-paper-dim: #AAA79D;
  --color-line: #F2F0EA29;
  --color-line-strong: #F2F0EA66;
  --color-amber: #F9B807;
  --color-on-amber: #0E0E0C;
  --color-amber-line: #0E0E0C3D;
  --color-photo-scrim: #0E0E0C59;
  --photo-filter: grayscale(1) contrast(1.08);
  --meta-opacity: 0.72;

  /* --- Radius ------------------------------------------------------------ */
  --radius-s: 2px;
  --radius-m: 4px;

  /* --- Borders ----------------------------------------------------------- */
  --border-hair: 1px;
  --border-terminal: 2px;
  --border-cable: 3px;

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 140ms;
  --duration-medium: 320ms;
  --press-offset: 1px;
  --nudge-s: 3px;
  --nudge-m: 4px;
  --hover-zoom: 1.03;

  /* --- Cable ------------------------------------------------------------- */
  --cable-gutter: clamp(1.75rem, calc(1.75rem + 0.0596 * (100vw - 360px)), 5.50rem);
  --cable-x: calc(var(--cable-gutter) * 0.3);
  --cable-tag-width: 24px;
  --tap-offset: 0.55em;
  --contact-cable-mobile: calc(var(--padding-section-y) + var(--space-3xl) + var(--space-4xl) + var(--space-2xl));

}