/* =============================================================
   NorthGate Design System — Foundations
   Colors + Typography tokens for NorthGate, JackPack, and BRES.
   ============================================================= */

/* ---- Brand fonts ----
   NorthGate's brand type is Helvetica Neue LT (W05). We ship three weights:
   45 Light, 55 Roman, 85 Heavy. Italics are synthesized where needed
   (the brand wordmark uses an oblique cut of the Heavy weight). */
@font-face {
  font-family: 'Helvetica Neue LT';
  src: url('fonts/HelveticaNeueLTW0545Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT';
  src: url('fonts/HelveticaNeueLTW0555Roman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT';
  src: url('fonts/HelveticaNeueLTW0585Heavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============ BRAND COLORS ============ */
  /* Source: PMS 363 / 377 / 583 + CMYK 0,2,0,68 warm gray */
  --ng-green-dark:     #3F7C3A;  /* PMS 363 — primary brand */
  --ng-green-medium:   #7A9A01;  /* PMS 377 — secondary */
  --ng-green-light:    #B7BF10;  /* PMS 583 — accent / gradient end */
  --ng-gray:           #585857;  /* CMYK 0,2,0,68 — body text + wordmark */

  /* ---- Tints (for backgrounds, hovers, surfaces) ---- */
  --ng-green-dark-900:   #29521E;
  --ng-green-dark-700:   #346A30;
  --ng-green-dark-500:   #3F7C3A;  /* base */
  --ng-green-dark-300:   #7EAA77;
  --ng-green-dark-100:   #D6E4D1;
  --ng-green-dark-050:   #EEF3EB;

  --ng-green-medium-700: #627C02;
  --ng-green-medium-500: #7A9A01;  /* base */
  --ng-green-medium-300: #A4BE4D;
  --ng-green-medium-100: #E4EBC3;

  --ng-green-light-500:  #B7BF10;  /* base */
  --ng-green-light-300:  #D1D668;
  --ng-green-light-100:  #EEF1C0;

  --ng-gray-900:         #1F1F1E;
  --ng-gray-800:         #333332;
  --ng-gray-700:         #585857;  /* base — wordmarks + body */
  --ng-gray-500:         #8A8A88;
  --ng-gray-400:         #B3B3B1;
  --ng-gray-300:         #D4D4D2;
  --ng-gray-200:         #E7E7E5;
  --ng-gray-100:         #F3F3F1;
  --ng-gray-050:         #FAFAF8;
  --ng-white:            #FFFFFF;
  --ng-black:            #0A0A0A;

  /* ---- Signature gradient (bracket frame + N logomark) ---- */
  --ng-gradient-brand:   linear-gradient(135deg, var(--ng-green-dark) 0%, var(--ng-green-medium) 55%, var(--ng-green-light) 100%);
  --ng-gradient-brand-h: linear-gradient(90deg,  var(--ng-green-dark) 0%, var(--ng-green-medium) 55%, var(--ng-green-light) 100%);
  --ng-gradient-soft:    linear-gradient(135deg, var(--ng-green-dark-050) 0%, var(--ng-green-medium-100) 100%);

  /* ============ SEMANTIC COLOR TOKENS ============ */
  --fg-1: var(--ng-gray-900);         /* headings */
  --fg-2: var(--ng-gray-700);         /* body */
  --fg-3: var(--ng-gray-500);         /* muted, captions */
  --fg-inverse: var(--ng-white);
  --fg-brand: var(--ng-green-dark);
  --fg-brand-accent: var(--ng-green-medium);
  --fg-link: var(--ng-green-dark);
  --fg-link-hover: var(--ng-green-dark-700);

  --bg-1: var(--ng-white);            /* page */
  --bg-2: var(--ng-gray-050);         /* subtle panel */
  --bg-3: var(--ng-gray-100);         /* input, hover */
  --bg-brand: var(--ng-green-dark);
  --bg-brand-soft: var(--ng-green-dark-050);
  --bg-inverse: var(--ng-gray-900);

  --border-1: var(--ng-gray-200);     /* hairline */
  --border-2: var(--ng-gray-300);     /* strong */
  --border-brand: var(--ng-green-dark);

  /* Status — keep restrained, pulled toward the brand palette */
  --status-success: #3F7C3A;          /* same as brand dark green */
  --status-warning: #C89A1A;
  --status-danger:  #B23B3B;
  --status-info:    #2F6C8F;

  /* ============ TYPOGRAPHY ============ */
  --font-display: 'Helvetica Neue LT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Helvetica Neue LT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — bias toward industrial/large (packaging + manufacturing) */
  --fs-display: 64px;   /* hero */
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      26px;
  --fs-h4:      20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;
  --fs-eyebrow: 13px;

  --lh-tight:  1.08;  /* @kind other */
  --lh-snug:   1.2;  /* @kind other */
  --lh-normal: 1.5;  /* @kind other */
  --lh-loose:  1.7;  /* @kind other */

  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.14em;   /* for ALL-CAPS eyebrows */
  --tracking-wordmark: 0.02em;

  /* ============ SPACING ============ */
  --sp-0:   0;  /* @kind spacing */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* ============ RADII ============ */
  /* NorthGate leans industrial: restrained rounding; brackets + straight edges are the motif */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ============ SHADOWS ============ */
  --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.06);
  --shadow-sm: 0 2px 6px rgba(10, 10, 10, 0.08);
  --shadow-md: 0 6px 16px rgba(10, 10, 10, 0.10);
  --shadow-lg: 0 16px 40px rgba(10, 10, 10, 0.14);
  --shadow-brand: 0 10px 30px rgba(63, 124, 58, 0.22);

  /* ============ MOTION ============ */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);  /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur-med:  200ms;  /* @kind other */
  --dur-slow: 360ms;  /* @kind other */

  /* ============ LAYOUT ============ */
  --container-max: 1280px;
  --container-padding: 24px;
}

/* ---------- Semantic element defaults ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  color: var(--fg-1);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  margin: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: 0.04em; }

p, li { font-family: var(--font-body); color: var(--fg-2); }

a:not(.btn) {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
a:not(.btn):hover {
  color: var(--fg-link-hover);
  border-bottom-color: currentColor;
}

code, pre { font-family: var(--font-mono); font-size: 0.95em; }

/* ---------- Utility classes ---------- */
.ng-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ng-green-dark);
}

.ng-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark);
  color: var(--ng-gray-700);
}

/* Signature gradient "bracket" — the parallelogram frame that wraps
   every NorthGate sub-brand logomark. Use it as a visual container
   around numbers, icons, or small imagery. */
.ng-bracket {
  position: relative;
  display: inline-block;
  padding: 10px 18px;
  background: var(--ng-gradient-brand);
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}
.ng-bracket--frame {
  background: transparent;
  padding: 4px;
  background-image: var(--ng-gradient-brand);
  /* hollow frame using mask */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}