/* =========================================================================
   Novadesk Med — Foundations
   Colors, type, spacing, radii, shadow tokens.
   Single source of truth used by all UI kits, slides, prototypes.
   ========================================================================= */

/* --- Webfonts ------------------------------------------------------------- */
/* Brand fonts:
   - Ibrand (display, primary brand typeface) — local TTF supplied by brand.
   - Poppins (body) — local TTFs supplied by brand.
   - Bricolage Grotesque (legacy display fallback) — kept from Google Fonts
     for backward compatibility with older slides. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap');

@font-face {
  font-family: 'Ibrand';
  font-weight: 100 900;
  font-style: normal;
  src: url('fonts/Ibrand.ttf') format('truetype');
  font-display: swap;
}

@font-face { font-family: 'Poppins'; font-weight: 100; font-style: normal; src: url('fonts/Poppins-Thin.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 100; font-style: italic; src: url('fonts/Poppins-ThinItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 200; font-style: normal; src: url('fonts/Poppins-ExtraLight.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 200; font-style: italic; src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 300; font-style: normal; src: url('fonts/Poppins-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 300; font-style: italic; src: url('fonts/Poppins-LightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; src: url('fonts/Poppins-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: italic; src: url('fonts/Poppins-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; src: url('fonts/Poppins-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: italic; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: italic; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; src: url('fonts/Poppins-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: italic; src: url('fonts/Poppins-BoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 800; font-style: normal; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 800; font-style: italic; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 900; font-style: normal; src: url('fonts/Poppins-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 900; font-style: italic; src: url('fonts/Poppins-BlackItalic.ttf') format('truetype'); font-display: swap; }

:root {
  /* ----- Brand color ------------------------------------------------------ */
  /* The single brand green. From PPTX (#1FA26B) and logo SVG (#00A26C).
     We use #00A26C because it matches the official logo file exactly. */
  --brand-green:        #00A26C;
  --brand-green-700:    #008255;   /* hover / pressed primary */
  --brand-green-800:    #006B47;   /* deepest brand step */
  --brand-green-300:    #66C7A4;   /* secondary surface */
  --brand-green-200:    #A8DEC7;   /* light surface, illustration mid */
  --brand-green-100:    #D6EFE3;   /* tint for callouts and pills */
  --brand-green-50:     #ECF8F2;   /* lightest tint, table row hover, etc */

  /* ----- Neutrals (text, surfaces, borders) ----------------------------- */
  --ink-1000:  #000000;     /* logos, hero headlines (B&W slides) */
  --ink-900:   #0E1311;     /* body text, headings on white */
  --ink-700:   #2A332F;     /* secondary text */
  --ink-500:   #5C6B65;     /* tertiary text, captions */
  --ink-400:   #8A9690;     /* placeholder, disabled-ish */
  --ink-300:   #C2CCC7;     /* hairline borders on dark photos */
  --ink-200:   #E2E7E5;     /* divider, card border */
  --ink-100:   #F1F3F2;     /* subtle background */
  --ink-50:    #F7F9F8;     /* page background tint */
  --paper:     #FFFFFF;     /* base surface */

  /* ----- Semantic ------------------------------------------------------- */
  --color-bg:           var(--paper);
  --color-bg-muted:     var(--ink-50);
  --color-fg:           var(--ink-900);
  --color-fg-muted:     var(--ink-500);
  --color-fg-onbrand:   var(--paper);
  --color-border:       var(--ink-200);
  --color-border-strong:var(--ink-300);

  --color-primary:      var(--brand-green);
  --color-primary-hover:var(--brand-green-700);
  --color-primary-press:var(--brand-green-800);
  --color-on-primary:   var(--paper);

  --color-success:      var(--brand-green);     /* same as brand */
  --color-warning:      #D97706;
  --color-danger:       #B42318;
  --color-info:         #0F6FB8;

  /* ----- Typography ----------------------------------------------------- */
  --font-display:        'Ibrand', 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display-legacy: 'Bricolage Grotesque', 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;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Type scale — display uses Bricolage, body uses Poppins.
     Sizes are ratio ~1.20-1.25 (major-third / perfect-fourth blend). */
  --fs-display-xl: clamp(56px, 6.4vw, 96px);    /* hero title */
  --fs-display-l:  clamp(44px, 4.8vw, 72px);    /* slide title */
  --fs-display-m:  clamp(36px, 3.6vw, 56px);    /* section header */
  --fs-display-s:  clamp(28px, 2.6vw, 40px);    /* big stat label */

  --fs-h1:  40px;
  --fs-h2:  32px;
  --fs-h3:  24px;
  --fs-h4:  20px;
  --fs-h5:  18px;

  --fs-body-l:  18px;
  --fs-body:    16px;
  --fs-body-s:  14px;
  --fs-caption: 12px;
  --fs-eyebrow: 12px;     /* uppercase eyebrow label */

  --lh-tight:   1.05;     /* display */
  --lh-snug:    1.15;     /* big headings */
  --lh-normal:  1.45;     /* body */
  --lh-loose:   1.6;      /* long-form copy */

  --tracking-tight:   -0.02em;   /* display headlines */
  --tracking-normal:  0;
  --tracking-eyebrow: 0.14em;    /* uppercase eyebrows on website */

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

  /* ----- Radii ---------------------------------------------------------- */
  /* The brand uses BIG, soft, droplet-style rounding on photo cards
     (top-corners ~16-24px, bottom often equally rounded), but asymmetric
     'arch' shapes on background art. Buttons & pills are fully rounded. */
  --radius-xs:     6px;
  --radius-sm:     10px;
  --radius-md:     14px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --radius-2xl:    40px;
  --radius-pill:   999px;
  --radius-arch-t: 50% 50% 8px 8px / 80px 80px 8px 8px; /* top-arched droplet */

  /* ----- Shadow / elevation -------------------------------------------- */
  /* Restrained shadows. The brand prefers flat surfaces with thin borders;
     elevation only for floating UI (dropdowns, tooltips, modals). */
  --shadow-xs: 0 1px 2px rgba(14,19,17,0.04);
  --shadow-sm: 0 2px 6px rgba(14,19,17,0.06);
  --shadow-md: 0 8px 24px rgba(14,19,17,0.08);
  --shadow-lg: 0 16px 48px rgba(14,19,17,0.12);
  --shadow-brand: 0 12px 32px rgba(0,162,108,0.18);

  /* ----- Motion --------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
}

/* --- Base resets / global type ------------------------------------------- */
html, body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Semantic typographic primitives ------------------------------------- */
.nm-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.nm-display-xl,
.nm-display-l,
.nm-display-m,
.nm-display-s {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}
.nm-display-xl { font-size: var(--fs-display-xl); }
.nm-display-l  { font-size: var(--fs-display-l);  }
.nm-display-m  { font-size: var(--fs-display-m);  line-height: var(--lh-snug); }
.nm-display-s  { font-size: var(--fs-display-s);  line-height: var(--lh-snug); }

.nm-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
.nm-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
.nm-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); }
.nm-h4 { font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); }
.nm-h5 { font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-h5); line-height: var(--lh-snug); }

.nm-body-l { font-family: var(--font-body); font-size: var(--fs-body-l); line-height: var(--lh-loose); }
.nm-body   { font-family: var(--font-body); font-size: var(--fs-body);   line-height: var(--lh-normal); }
.nm-body-s { font-family: var(--font-body); font-size: var(--fs-body-s); line-height: var(--lh-normal); color: var(--color-fg-muted); }
.nm-caption{ font-family: var(--font-body); font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--color-fg-muted); }

/* When italics are needed in display copy, fall back to body italic
   (Bricolage Grotesque has no italic style). */
.nm-italic-display { font-family: var(--font-body); font-style: italic; font-weight: 500; }