/* =========================================================================
   PLUGABLE DESIGN SYSTEM — TOKENS
   Source of truth: Plugable Brand Cheat Sheet 2026.
   "Engineered clarity meets modern workspace minimalism"
   ========================================================================= */

/* ---------- Type ----------
   Brand primary: Proxima Nova (Bold / Medium / Regular).
   Brand secondary (only if Proxima Nova is unavailable): Arial.
   Not self-hosted here: our Proxima Nova web licence is unconfirmed, so the
   page uses it where it's installed and falls back to Arial (as the
   brand allows) everywhere else.
   Labels, token names, specs and metadata are set in Proxima Nova
   Semibold (--plg-font-label). No condensed or monospace face is used. */






:root {
  /* =======================================================================
     CORE PALETTE — exact cheat-sheet values
     ======================================================================= */
  --plg-white:        #ffffff;  /* Background · White        · 255.255.255 */
  --plg-text:         #333333;  /* Text · Black 6 C          · 51.51.51    */
  --plg-primary-1:    #006341;  /* Primary 1 · Green 3425 C  · 0.99.65     */
  --plg-primary-2:    #41b880;  /* Primary 2 · Light Green   · 65.184.128  */
  --plg-secondary-1:  #2e67b1;  /* Secondary 1 · Blue        · 46.103.177  */
  --plg-secondary-2:  #ee4455;  /* Secondary 2 · Red         · 238.68.85   */
  --plg-secondary-3:  #c5e86c;  /* Secondary 3 · Green 374 C · 196.231.109 */
  --plg-secondary-4:  #fab780;  /* Secondary 4 · Light Orange· 250.183.128 */

  /* ---------- Primary green scale (derived from #006341) ---------- */
  --plg-green-900: #00301f;
  --plg-green-800: #004a30;
  --plg-green-700: #006341;   /* PRIMARY 1 — canonical */
  --plg-green-600: #158055;
  --plg-green-500: #41b880;   /* PRIMARY 2 — canonical */
  --plg-green-400: #6ecaa0;
  --plg-green-300: #9adcc0;
  --plg-green-200: #c4ebda;
  --plg-green-100: #e2f5ec;
  --plg-green-050: #f2fbf7;

  /* ---------- Neutral scale (anchored on #333333) ---------- */
  --plg-ink-900: #1a1a1a;
  --plg-ink-800: #262626;
  --plg-ink-700: #333333;   /* TEXT — canonical */
  --plg-ink-600: #555555;
  --plg-ink-500: #757575;
  --plg-ink-400: #9a9a9a;
  --plg-ink-300: #c2c2c2;
  --plg-ink-200: #dedede;
  --plg-ink-100: #ededed;
  --plg-ink-050: #f6f6f6;
  --plg-ink-000: #ffffff;

  /* ---------- Secondary accents + tints ---------- */
  --plg-blue-700:   #1f4b86;
  --plg-blue-500:   #2e67b1;  /* Secondary 1 */
  --plg-blue-100:   #e0eaf6;
  --plg-red-700:    #c22b3b;
  --plg-red-500:    #ee4455;  /* Secondary 2 */
  --plg-red-100:    #fde3e6;
  --plg-lime-700:   #7fa32e;
  --plg-lime-500:   #c5e86c;  /* Secondary 3 */
  --plg-lime-100:   #f2fadd;
  --plg-orange-700: #c47838;
  --plg-orange-500: #fab780;  /* Secondary 4 */
  --plg-orange-100: #fef0e4;

  /* ---------- Semantic (mapped onto brand secondaries) ---------- */
  --plg-success:    #006341;
  --plg-success-bg: #e2f5ec;
  --plg-info:       #2e67b1;
  --plg-info-bg:    #e0eaf6;
  --plg-danger:     #ee4455;
  --plg-danger-bg:  #fde3e6;
  --plg-warning:    #c47838;   /* darkened Secondary 4 for text contrast */
  --plg-warning-bg: #fef0e4;

  /* ---------- Surfaces (Light Mode default) ---------- */
  --plg-surface:        #ffffff;
  --plg-surface-sunken: #f6f6f6;
  --plg-surface-raised: #ffffff;
  --plg-border:         #dedede;
  --plg-border-strong:  #c2c2c2;
  --plg-on-surface:     #333333;
  --plg-on-surface-mut: #555555;

  /* Glassmorphism — "floating glassmorphism panels" */
  --plg-glass-bg:     rgba(255, 255, 255, 0.62);
  --plg-glass-border: rgba(255, 255, 255, 0.75);
  --plg-glass-blur:   blur(18px) saturate(1.4); /* @kind other */
  --plg-glass-shadow: 0 8px 32px rgba(0, 99, 65, 0.10), 0 2px 8px rgba(51, 51, 51, 0.06);

  /* =======================================================================
     TYPOGRAPHY
     ======================================================================= */
  --plg-font-sans:    "Proxima Nova", Arial, Helvetica, sans-serif;
  --plg-font-display: "Proxima Nova", Arial, Helvetica, sans-serif;
  --plg-font-label:   "Proxima Nova", Arial, Helvetica, sans-serif;
  --plg-weight-label: 600;    /* Proxima Nova Semibold */

  --plg-weight-heading: 700;  /* Proxima Bold    */
  --plg-weight-subhead: 500;  /* Proxima Medium  */
  --plg-weight-body:    400;  /* Proxima Regular */

  /* Type scale — floor is 16 px for on-screen / video-call legibility.
     Never set live-presented type below --plg-text-xs.                     */
  --plg-text-xs:   16px;
  --plg-text-sm:   18px;
  --plg-text-base: 20px;
  --plg-text-md:   22px;
  --plg-text-lg:   26px;
  --plg-text-xl:   32px;
  --plg-text-2xl:  38px;
  --plg-text-3xl:  46px;
  --plg-text-4xl:  56px;
  --plg-text-5xl:  72px;
  --plg-text-6xl:  96px;

  /* ---------- Spacing (4pt base) ---------- */
  --plg-space-1: 4px;   --plg-space-2: 8px;   --plg-space-3: 12px;
  --plg-space-4: 16px;  --plg-space-5: 20px;  --plg-space-6: 24px;
  --plg-space-8: 32px;  --plg-space-10: 40px; --plg-space-12: 48px;
  --plg-space-16: 64px; --plg-space-20: 80px; --plg-space-24: 96px;
  --plg-space-32: 128px;

  /* ---------- Radii — soft, modern, minimal ---------- */
  --plg-radius-none: 0px;
  --plg-radius-sm:   4px;
  --plg-radius-md:   8px;
  --plg-radius-lg:   12px;
  --plg-radius-xl:   18px;
  --plg-radius-2xl:  26px;
  --plg-radius-pill: 999px;

  /* ---------- Shadows — soft and diffuse ---------- */
  --plg-shadow-xs: 0 1px 2px rgba(51, 51, 51, 0.05);
  --plg-shadow-sm: 0 2px 6px rgba(51, 51, 51, 0.07);
  --plg-shadow-md: 0 6px 18px rgba(51, 51, 51, 0.08);
  --plg-shadow-lg: 0 16px 40px rgba(51, 51, 51, 0.10);
  --plg-shadow-xl: 0 28px 64px rgba(51, 51, 51, 0.13);
  --plg-shadow-green: 0 10px 30px rgba(0, 99, 65, 0.20);

  /* ---------- Motion ---------- */
  --plg-ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --plg-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
}

/* =========================================================================
   DARK MODE — apply data-theme="dark" on <html> or any container
   ========================================================================= */
[data-theme="dark"] {
  --plg-surface:        #1a1f1d;
  --plg-surface-sunken: #131716;
  --plg-surface-raised: #232927;
  --plg-border:         #333a37;
  --plg-border-strong:  #47504c;
  --plg-on-surface:     #f2f5f4;
  --plg-on-surface-mut: #b4bdb9;

  --plg-ink-900: #ffffff;
  --plg-ink-800: #f2f5f4;
  --plg-ink-700: #e4e9e7;
  --plg-ink-600: #b4bdb9;
  --plg-ink-500: #8d9793;
  --plg-ink-400: #6d7772;
  --plg-ink-300: #47504c;
  --plg-ink-200: #333a37;
  --plg-ink-100: #262c2a;
  --plg-ink-050: #1f2422;
  --plg-ink-000: #1a1f1d;

  /* On dark, Primary 2 leads — #006341 is too low-contrast for text */
  --plg-green-100: #16302a;
  --plg-green-050: #121d1a;
  --plg-success:    #41b880;
  --plg-success-bg: #12332a;
  --plg-info:       #6f9fd8;
  --plg-info-bg:    #16263b;
  --plg-danger:     #ff7b88;
  --plg-danger-bg:  #3a1c20;
  --plg-warning:    #fab780;
  --plg-warning-bg: #3a2a1c;

  --plg-glass-bg:     rgba(35, 41, 39, 0.58);
  --plg-glass-border: rgba(255, 255, 255, 0.12);
  --plg-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* =========================================================================
   PRIMITIVES
   ========================================================================= */
.plg-body {
  font-family: var(--plg-font-sans);
  font-size: var(--plg-text-base);
  font-weight: var(--plg-weight-body);
  line-height: 1.55;
  color: var(--plg-on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — Proxima Bold, sentence case. No uppercase display treatment. */
.plg-h1 { font-family: var(--plg-font-display); font-weight: 700; font-size: var(--plg-text-5xl); line-height: 1.04; letter-spacing: -0.02em; color: var(--plg-on-surface); }
.plg-h2 { font-family: var(--plg-font-display); font-weight: 700; font-size: var(--plg-text-3xl); line-height: 1.1;  letter-spacing: -0.015em; color: var(--plg-on-surface); }
.plg-h3 { font-family: var(--plg-font-display); font-weight: 700; font-size: var(--plg-text-xl); line-height: 1.2;  letter-spacing: -0.01em; color: var(--plg-on-surface); }

/* Sub-headings — Proxima Medium */
.plg-subhead { font-family: var(--plg-font-sans); font-weight: 500; font-size: var(--plg-text-lg); line-height: 1.35; color: var(--plg-on-surface-mut); }

.plg-eyebrow {
  font-family: var(--plg-font-sans);
  font-size: var(--plg-text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plg-primary-1);
}

.plg-label,
.plg-mono { font-family: var(--plg-font-label); font-weight: 600; letter-spacing: 0.02em; }

/* Floating glassmorphism panel — the brand's signature text container */
.plg-glass {
  background: var(--plg-glass-bg);
  -webkit-backdrop-filter: var(--plg-glass-blur);
  backdrop-filter: var(--plg-glass-blur);
  border: 1px solid var(--plg-glass-border);
  border-radius: var(--plg-radius-xl);
  box-shadow: var(--plg-glass-shadow);
}

/* Thin-line icon default — icons are thin-line, in the brand accent color */
.plg-icon {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--plg-primary-1);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a { color: var(--plg-primary-1); text-decoration: none; }
a:hover { color: var(--plg-green-600); text-decoration: underline; }
[data-theme="dark"] a { color: var(--plg-primary-2); }
[data-theme="dark"] a:hover { color: var(--plg-green-400); }