<?php
/**
 * DOLLARDECISION — GLOBAL DESIGN SYSTEM
 ... (keep your existing comments) ...
 */
if ( ! defined( 'ABSPATH' ) ) exit;
?>
<style>
/* Typography: Arial only (system font) — no web fonts loaded.
   Zero font payload, zero font-swap CLS. Do not reintroduce @font-face. */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
  /* ---- Brand colors ---- */
  --brand-bg:          #023128;
  --brand-bg-darker:   #011f19;
  --brand-accent:      #E8FCA2;
  --brand-accent-hover:#dcf58c;

  /* ---- Light surfaces (for content pages on white bg) ---- */
  --page-bg:           #ffffff;
  --page-bg-soft:      #f6f8f6;   /* faint green-tinted off-white */
  --card-bg:           #ffffff;

  /* ---- Text colors ---- */
  --text-on-dark:      #ffffff;
  --text-on-dark-soft: rgba(255,255,255,0.7);
  --text-on-dark-mute: rgba(255,255,255,0.5);
  --text-primary:      #023128;   /* dark green text on light bg */
  --text-body:         #2b3a34;   /* softened body text on light bg */
  --text-muted:        #5c6b64;   /* muted body text on light bg */

  /* ---- Lines / surfaces on dark ---- */
  --line:              rgba(255,255,255,0.1);
  --line-soft:         rgba(255,255,255,0.05);
  --surface:           rgba(255,255,255,0.03);
  --surface-2:         rgba(255,255,255,0.05);

  /* ---- Lines / surfaces on light ---- */
  --line-light:        rgba(2,49,40,0.1);
  --line-light-soft:   rgba(2,49,40,0.06);
  --accent-tint:       rgba(232,252,162,0.15);
  --accent-tint-border:rgba(232,252,162,0.3);

  /* ---- Typography ---- */
  --ff-body: Arial, Helvetica, sans-serif;

  /* Type scale (matches header sizing) */
  --fs-display:  clamp(40px, 6vw, 64px); /* hero headline */
  --fs-h1:       clamp(32px, 4.5vw, 48px);
  --fs-h2:       clamp(26px, 3.2vw, 34px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body-lg:  16px;
  --fs-body:     14.5px;
  --fs-small:    13.5px;
  --fs-eyebrow:  11px;

  /* Weights (header uses 800 for headings/logo, 600 for links/nav) */
  --fw-heading:  800;
  --fw-strong:   700;
  --fw-medium:   600;
  --fw-body:     400;

  /* Letter spacing (header conventions) */
  --ls-heading:  -1.5px;   /* big headings + logo */
  --ls-tight:    -0.3px;
  --ls-eyebrow:  1.8px;    /* uppercase eyebrows */

  /* ---- Radii (from header) ---- */
  --radius-pill:  100px;
  --radius-menu:  28px;
  --radius-card:  20px;
  --radius-md:    14px;
  --radius-sm:    10px;

  /* ---- Motion (from header) ---- */
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
  --speed: 0.35s;
}

/* ------------------------------------------------------------
   2. BASE / RESET
   ------------------------------------------------------------ */
*,*::before,*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-body);
  line-height: 1.65;
  color: var(--text-body);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
   3. TYPOGRAPHY (matches desktop-header conventions)
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-body);
  color: var(--text-primary);
  margin: 0 0 0.5em;
  line-height: 1.15;
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-heading); letter-spacing: var(--ls-heading); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-heading); letter-spacing: var(--ls-heading); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-heading); letter-spacing: var(--ls-tight); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-strong);  letter-spacing: 0; }

.dd-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  line-height: 1.08;
  color: var(--text-primary);
}

/* accent word inside a heading, e.g. <em> (matches sidebar .head em) */
h1 em, h2 em, .dd-display em, .dd-accent-word {
  font-style: italic;
  color: var(--brand-accent);
  font-family: inherit; /* ADDED: Force inherit so theme defaults don't override H1 font */
}
/* On light backgrounds the lime is too pale — use dark green italic instead */
.on-light h1 em, .on-light h2 em, .on-light .dd-display em { color: var(--brand-bg); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Eyebrow label (matches .eyebrow / .dd-col-head h5) */
.dd-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-accent);
}
.on-light .dd-eyebrow { color: var(--brand-bg); }

a { color: var(--brand-bg); text-decoration: none; transition: color var(--speed) var(--ease); }
a:hover { color: var(--brand-accent-hover); }
.on-dark a { color: var(--brand-accent); }

strong, b { font-weight: var(--fw-medium); }

/* ------------------------------------------------------------
   4. THEME SECTIONS
   ------------------------------------------------------------ */
.dd-section        { padding: 72px 0; }
.dd-container      { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.dd-on-dark {
  background: var(--brand-bg);
  color: var(--text-on-dark);
}
.dd-on-dark h1, .dd-on-dark h2, .dd-on-dark h3, .dd-on-dark h4 { color: var(--text-on-dark); }
.dd-on-dark p { color: var(--text-on-dark-soft); }

.dd-on-darker { background: var(--brand-bg-darker); color: var(--text-on-dark); }
.dd-on-soft   { background: var(--page-bg-soft); }

/* ------------------------------------------------------------
   5. BUTTONS (lifted from header .dd-btn)
   ------------------------------------------------------------ */
.dd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: var(--radius-pill);
  font-family: var(--ff-body);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              color var(--speed) var(--ease),
              transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}
.dd-btn svg { width: 16px; height: 16px; }

/* Primary — lime pill (header .dd-btn-primary) */
.dd-btn-primary {
  background: var(--brand-accent); color: var(--brand-bg);
  box-shadow: 0 4px 14px -2px rgba(232,252,162,0.2);
}
.dd-btn-primary:hover {
  background: var(--brand-accent-hover); color: var(--brand-bg);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -4px rgba(232,252,162,0.3);
}

/* Ghost — outlined, fills lime on hover (header .dd-btn-ghost, dark ctx) */
.dd-btn-ghost {
  background: transparent; color: var(--text-on-dark);
  border-color: rgba(255,255,255,0.3);
}
.dd-btn-ghost:hover {
  background: var(--brand-accent); color: var(--brand-bg);
  border-color: var(--brand-accent);
}

/* ADDED: Dark — dark green pill, fills lime on hover (for search bars, etc.) */
.dd-btn-dark {
  background: var(--brand-bg); color: var(--text-on-dark);
}
.dd-btn-dark:hover {
  background: var(--brand-accent); color: var(--brand-bg);
  transform: translateY(-1px);
}

/* Ghost on light backgrounds */
.on-light .dd-btn-ghost, .dd-btn-ghost-dark {
  color: var(--brand-bg); border-color: var(--line-light);
}
.on-light .dd-btn-ghost:hover, .dd-btn-ghost-dark:hover {
  background: var(--brand-bg); color: var(--text-on-dark); border-color: var(--brand-bg);
}

.dd-btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* ------------------------------------------------------------
   6. CARDS  (matches header .dd-hi surface treatment)
   ------------------------------------------------------------ */
.dd-card {
  background: var(--card-bg);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-card);
  padding: 28px;
  transition: border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.dd-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-tint-border);
  box-shadow: 0 12px 32px -8px rgba(2,49,40,0.12);
}
.dd-on-dark .dd-card {
  background: var(--surface);
  border-color: var(--line);
}
.dd-on-dark .dd-card:hover {
  border-color: var(--accent-tint-border);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.3);
}

/* Tags (from header .tag) */
.dd-tag {
  padding: 3px 8px; border-radius: var(--radius-pill);
  font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
}
.dd-tag-new { background: var(--accent-tint); color: var(--brand-bg); border: 1px solid var(--accent-tint-border); }
.dd-on-dark .dd-tag-new { color: var(--brand-accent); }
.dd-tag-hot { background: rgba(220,38,38,0.15); color: #b91c1c; border: 1px solid rgba(220,38,38,0.3); }
.dd-on-dark .dd-tag-hot { color: #fca5a5; }

/* ------------------------------------------------------------
   7. FORM CONTROLS (matches header search/newsletter inputs)
   ------------------------------------------------------------ */
.dd-input {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  border-radius: var(--radius-pill);
  padding: 13px 20px;
  outline: none;
  transition: border-color var(--speed) var(--ease),
              background var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}
.dd-input {
  background: var(--page-bg-soft);
  border: 1px solid var(--line-light);
  color: var(--text-primary);
}
.dd-input:focus {
  border-color: var(--brand-bg);
  box-shadow: 0 0 0 3px rgba(2,49,40,0.08);
}
.dd-on-dark .dd-input {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
}
.dd-on-dark .dd-input::placeholder { color: rgba(255,255,255,0.4); }
.dd-on-dark .dd-input:focus {
  border-color: var(--brand-accent);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 3px rgba(232,252,162,0.15);
}

/* ------------------------------------------------------------
   8. UTILITIES
   ------------------------------------------------------------ */
.dd-accent   { color: var(--brand-accent); }
.dd-green    { color: var(--brand-bg); }
.text-center { text-align: center; }
.dd-mb-0 { margin-bottom: 0; }

::selection { background: var(--brand-accent); color: var(--brand-bg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
