/* NGD design tokens
   Ported verbatim from brand-guidelines.html :root block, plus spacing and
   radius scales. Every other stylesheet in the project consumes these
   custom properties, do not redefine colours or fonts downstream. */

:root {
  /* Brand colours */
  --brand:      #29A1DD;
  --secondary:  #D81E5B;
  --paper:      #F3EFE8;
  --ink:        #1A0F19;

  /* Support colours */
  --coral:      #F0544F;
  --teal:       #086788;
  --cream:      #FDF0D5;

  /* Surfaces and hairlines */
  --ink-2:      #241621;
  --ink-3:      #2f1c2b;
  --hair:       rgba(243, 239, 232, .14);
  --hair-soft:  rgba(243, 239, 232, .08);
  --paper-dim:  rgba(243, 239, 232, .62);
  --paper-faint:rgba(243, 239, 232, .40);

  /* Typography */
  --display: 'Cal Sans', 'Poppins', system-ui, sans-serif;
  --body: 'Stack Sans Headline', 'Inter', system-ui, -apple-system, sans-serif;

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);

  /* Spacing scale, 8px base */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 48px;
  --sp-6: 96px;
  --sp-7: 120px;

  /* Radius scale */
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-pill: 50px;
}

/* Crop marks, print heritage signature */
.crop { position: fixed; z-index: 60; width: 26px; height: 26px; pointer-events: none; opacity: .5; mix-blend-mode: screen; }
.crop::before, .crop::after { content: ""; position: absolute; background: var(--paper); }
.crop::before { width: 1px; height: 26px; }
.crop::after { height: 1px; width: 26px; }
.crop.tl { top: 22px; left: 22px; }
.crop.tr { top: 22px; right: 22px; }
.crop.bl { bottom: 22px; left: 22px; }
.crop.br { bottom: 22px; right: 22px; }
.crop.tr::before, .crop.br::before { right: 0; }
.crop.bl::before { left: 0; }
.crop.bl::after, .crop.br::after { bottom: 0; }
.crop.tr::after { right: 0; }
@media (max-width: 720px) { .crop { display: none; } }

/* Registration target, the signature marker that replaces numbering */
.reg { width: 15px; height: 15px; border: 1px solid var(--brand); border-radius: 50%; position: relative; flex: none; display: inline-block; }
.reg::before, .reg::after { content: ""; position: absolute; background: var(--brand); }
.reg::before { left: 50%; top: -4px; bottom: -4px; width: 1px; transform: translateX(-50%); }
.reg::after { top: 50%; left: -4px; right: -4px; height: 1px; transform: translateY(-50%); }
.reg.s { border-color: var(--secondary); }
.reg.s::before, .reg.s::after { background: var(--secondary); }
.reg.c { border-color: var(--coral); }
.reg.c::before, .reg.c::after { background: var(--coral); }
.reg.t { border-color: var(--teal); }
.reg.t::before, .reg.t::after { background: var(--teal); }
.reg.lg { width: 20px; height: 20px; }