/* ============================================================
   NAD Software Limited — Foundational Tokens
   Colors + Typography + Radii + Shadows + Spacing
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand colors ---------- */
  --nad-red:        #EC141D;   /* rgb(236,20,29) — primary accent / hero blocks */
  --nad-red-dark:   #C1161C;   /* rgb(193,22,28) — gradient stop / pressed       */
  --nad-red-bright: #FF0302;   /* rgb(255,3,2)   — pure highlight                */
  --nad-yellow:     #E8F317;   /* rgb(232,243,23) — underlay mask accent         */
  --nad-cream:      #F1EFE3;   /* rgb(241,239,227) — soft surface / tab-strip    */

  /* ---------- Neutrals ---------- */
  --nad-black:      #000000;
  --nad-ink:        #0A0A0A;
  --nad-graphite:   #1A1A1A;
  --nad-grey-900:   #292929;
  --nad-grey-700:   #5C5C5C;
  --nad-grey-500:   #8A8A8A;
  --nad-grey-300:   #D9D9D9;   /* rgb(217,217,217) — image placeholder fill      */
  --nad-grey-100:   #F2F2F2;
  --nad-white:      #FFFFFF;
  --nad-white-40:   rgba(255,255,255,0.40); /* radial halo glow */
  --nad-shadow-25:  rgba(0,0,0,0.25);        /* button & card drop shadow */

  /* ---------- Semantic foreground / background ---------- */
  --fg-1:           var(--nad-black);    /* primary text on light */
  --fg-2:           var(--nad-grey-700); /* secondary text        */
  --fg-3:           var(--nad-grey-500); /* tertiary / labels     */
  --fg-on-dark:     var(--nad-white);
  --fg-on-red:      var(--nad-white);

  --bg-0:           var(--nad-white);    /* page background       */
  --bg-1:           var(--nad-cream);    /* alt surface / tab     */
  --bg-2:           var(--nad-grey-100);
  --bg-invert:      var(--nad-black);    /* dark hero block       */
  --bg-accent:      var(--nad-red);      /* red hero block        */

  /* ---------- Type families ---------- */
  --font-display:   'Geist', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:      'Poppins', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- Type scale (1920 design grid) ---------- */
  --fs-display-1:  104px;   /* Hero headline (Geist)         */
  --fs-display-2:  72px;    /* Section headline (Geist)      */
  --fs-h1:         64px;    /* Page title (Poppins Bold)     */
  --fs-h2:         48px;    /* Sub-display (Geist)           */
  --fs-h3:         40px;    /* Sub head                       */
  --fs-h4:         32px;    /* Sub head small                 */
  --fs-body-lg:    24px;    /* Hero subtext, button label    */
  --fs-body:       18px;    /* Body                            */
  --fs-body-sm:    16px;    /* Small body / nav                */
  --fs-caption:    14px;    /* Labels, footnotes               */

  --lh-display:    1.07;    /* 112/104                          */
  --lh-tight:      1.0;
  --lh-body:       1.5;
  --lh-relaxed:    1.65;

  --tracking-display: -0.04em;  /* Geist big sizes              */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;   /* eyebrow caps                 */

  /* ---------- Radii ---------- */
  --r-xs:    6px;
  --r-sm:    12px;
  --r-md:    20px;
  --r-lg:    30px;     /* image / card medium                 */
  --r-xl:    60px;     /* large content card                  */
  --r-pill:  999px;    /* buttons + chips                     */

  /* ---------- Shadows ---------- */
  --shadow-button: 0 15px 30px 0 var(--nad-shadow-25);
  --shadow-card:   0 20px 40px -10px rgba(0,0,0,0.12);
  --shadow-lift:   0 30px 60px -20px rgba(0,0,0,0.18);

  /* ---------- Spacing scale (4-pt) ---------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  120px;

  /* ---------- Layout ---------- */
  --gutter-x:      96px;   /* desktop side margin               */
  --content-max:   1728px; /* 1920 - 2*96                       */

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.2,.7,.2,1);
  --ease-in:    cubic-bezier(.4,0,.6,.4);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --dur-fast:   140ms;
  --dur-med:    240ms;
  --dur-slow:   520ms;
}

/* ============================================================
   Base elements / semantic classes
   ============================================================ */
html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-0);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-1, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-2);
  line-height: 1.0;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.25;
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  letter-spacing: 0;
  color: var(--fg-1);
}
.body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: 1.45;
  color: var(--fg-1);
}
p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-3);
}
code, .mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.95em;
}