/* ============================================================
   PMG ENGINEERING — NEXT-GEN MARKETING · DESIGN TOKENS
   Source of truth: design-inputs/PMG Engineering UI redesign_v1/handoff/tokens.css
   Only loaded when ng_preview is active (see pages/base.html). Values carry
   real CSS units so ng.css can consume them directly.
   ============================================================ */

:root {
  /* ---------- COLOR · BRAND ---------- */
  --pmg-red:        #E42027;   /* primary CTA, featured, brand moments — darkened from #E8272E for WCAG-AA on white (4.41→4.63) */
  --pmg-red-hover:  #141414;   /* solid-red buttons invert to ink on hover */
  --pmg-red-on-dark:#EF3E44;   /* red eyebrows/kickers on ink surfaces — lighter so 12px mono clears WCAG-AA (4.8:1 on #141414); the base red is unreadable there (3.97) */
  --pmg-red-tint:   #F3B9BB;   /* red chip borders */
  --pmg-blue:       #1774B5;   /* links, knowledge/explore surfaces, tech — darkened from #1B7FC3 for WCAG-AA on white (4.31→5.0) */
  --pmg-blue-tint:  #BBD9EC;   /* blue chip borders */
  --pmg-blue-light: #7FC4EE;   /* blue accents on dark imagery */

  /* ---------- COLOR · NEUTRALS ---------- */
  --pmg-ink:        #141414;   /* headlines, dark bands, footer */
  --pmg-ink-2:      #1d1d1d;   /* hover cells on ink bands */
  --pmg-ink-3:      #2a2a2a;   /* dark-surface hairline (strong) */
  --pmg-ink-4:      #333333;   /* dark-surface hairline (default) */
  --pmg-ink-5:      #444444;   /* dark-surface outline buttons */
  --pmg-paper:      #EDEDEB;   /* page background */
  --pmg-card:       #FFFFFF;   /* card / content surface */
  --pmg-card-alt:   #F7F7F4;   /* subtle panel, quote blocks, table hover */
  --pmg-card-input: #FDFDFC;   /* form fields */
  --pmg-chip-bg:    #F2F2EF;   /* neutral chip fill */
  --pmg-hairline-1: #DDDDD9;   /* card borders, section rules */
  --pmg-hairline-2: #EBEBE7;   /* inner dividers, grid cells */
  --pmg-hairline-3: #E3E3DF;   /* small chip borders */

  /* ---------- COLOR · TEXT ---------- */
  --pmg-text:              #141414;
  --pmg-text-body:         #3c3c3a;   /* long-form paragraphs */
  --pmg-text-muted:        #5a5a58;   /* secondary UI text */
  --pmg-text-faint:        #6e6e6a;   /* meta/mono captions ON LIGHT — AA at small sizes */
  --pmg-text-faint-on-dark:#8a8a86;   /* meta/mono captions ON INK */
  --pmg-text-disabled:     #c9c9c5;
  --pmg-text-on-dark:      #FFFFFF;
  --pmg-text-on-dark-body: #c9c9c5;
  --pmg-text-on-red-body:  rgba(255,255,255,0.88);
  --pmg-text-on-red-muted: rgba(255,255,255,0.75);

  /* ---------- CONTENT-TYPE BADGE MAP ---------- */
  --badge-project:     var(--pmg-ink);
  --badge-product:     var(--pmg-ink);
  --badge-article:     var(--pmg-blue);
  --badge-infographic: var(--pmg-blue);
  --badge-elearning:   var(--pmg-blue);
  --badge-technology:  var(--pmg-blue);
  --badge-video:       var(--pmg-red);
  --badge-featured:    var(--pmg-red);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'IBM Plex Sans Condensed', system-ui, sans-serif; /* display 600/700 */
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;           /* 400-700 */
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;         /* 400/500/600 */

  --display-weight: 700;
  --display-case: uppercase;
  --display-tracking: -0.01em;
  --mono-tracking-tight:  0.04em;
  --mono-tracking:        0.08em;   /* badges */
  --mono-tracking-wide:   0.12em;   /* sidebar labels */
  --mono-tracking-kicker: 0.14em;

  /* type scale (px, with units) */
  --text-masthead:  76px;
  --text-hero:      clamp(34px, 4.6vw, 64px);
  --text-hero-page: 56px;
  --text-hero-sub:  44px;
  --text-h1-detail: 40px;
  --text-h1-compact:34px;
  --text-h2-section:26px;
  --text-h2-card:   20px;
  --text-card-title:16.5px;
  --text-body-lg:   16.5px;
  --text-body:      14.5px;
  --text-body-sm:   13.5px;
  --text-mono-stat: 22px;
  --text-mono-meta: 11.5px;
  --text-mono-badge:11px;
  --text-mono-micro:10.5px;

  --leading-display: 0.98;
  --leading-heading: 1.15;
  --leading-card:    1.3;
  --leading-body:    1.65;
  --leading-mono:    1.7;

  --stat-size:   32px;
  --stat-weight: 700;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-9: 40px; --space-10: 48px; --space-11: 56px; --space-12: 64px;
  --space-hero-y: 60px;
  --card-pad:  18px 20px;
  --panel-pad: 28px 32px;
  --band-pad-y: 48px;

  /* ---------- LAYOUT ---------- */
  --container-wide: 1360px;
  --container:      1160px;
  --gutter:  40px;
  --grid-gap: 14px;
  --feed-gap: 20px;
  --sidebar-w: 320px;
  --header-h:  68px;
  --utilbar-h: 34px;
  --sticky-filter-top: 68px;

  /* ---------- IMAGE RATIOS ---------- */
  --ratio-card: 16 / 10;
  --ratio-media: 16 / 9;
  --ratio-hero-img: 1200 / 630;
  --ratio-short: 9 / 16;
  --ratio-infographic: 3 / 4;

  /* ---------- BORDERS & RADII ---------- */
  --border-hairline: 1px solid var(--pmg-hairline-1);
  --border-inner:    1px solid var(--pmg-hairline-2);
  --border-button:   1.5px;
  --border-accent:   3px;
  --radius:       0;      /* SHARP corners everywhere */
  --radius-pill:  99px;   /* sector pills only */
  --radius-round: 50%;    /* play buttons only */

  /* ---------- BUTTONS ---------- */
  --btn-pad:    10px 18px;
  --btn-pad-lg: 13px 24px;
  --btn-tracking: 0.05em;

  /* ---------- ELEVATION & MOTION ---------- */
  --shadow: none;                    /* flat system — borders carry hierarchy */
  --transition: border-color .15s ease, color .15s ease, background-color .15s ease;

  /* ---------- Z-INDEX ---------- */
  --z-header: 50;
  --z-sticky-filter: 40;

  /* ---------- CONTACT CHANNELS ---------- */
  --wa-link:  https://wa.me/919871115995;
  --tel-link: tel:+919871115995;
}