/* MuneebDev brand tokens · Option B, Forest and signal · v1.0
   From the brand kit (tokens/brand-tokens.css). Values and component classes
   are unchanged. Three things are left out so that loading this file never
   restyles a page on its own:
   - the @import of Google Fonts (render-blocking); fonts load through the
     md-brand-fonts handle instead (functions.php),
   - the global body / h1-h4 rules,
   - the global :focus-visible ring.
   Each page applies those deliberately when it is rebranded; the focus ring
   is available as .md-focus below. */

:root {
  /* color */
  --md-forest: #0E3B2E;
  --md-forest-deep: #082A20;
  --md-forest-raised: #144536;
  --md-forest-line: #245847;
  --md-lime: #C6F36B;
  --md-lime-hover: #B5E655;
  --md-lime-tint: #EFFBD9;
  --md-moss: #3F7A2A;
  --md-cream: #F4F1EA;
  --md-cream-soft: #FAF8F3;
  --md-white: #FFFFFF;
  --md-sage: #7A9A88;
  --md-sage-tint: #E9EFEA;
  --md-graphite: #2B2F2C;
  --md-muted: #5E6B63;
  --md-line: #DCE3DD;
  --md-on-dark-secondary: #B8CBBF;
  --md-success: #3F7A2A;
  --md-error: #B42318;
  --md-warning: #B54708;
  /* font */
  --md-font-heading: 'Space Grotesk', system-ui, sans-serif;
  --md-font-body: 'Inter', system-ui, sans-serif;
  --md-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --md-font-arabic: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  /* fontSize */
  --md-text-display: 64px;
  --md-text-h1: 48px;
  --md-text-h2: 36px;
  --md-text-h3: 24px;
  --md-text-h4: 19px;
  --md-text-body-lg: 18px;
  --md-text-body: 16px;
  --md-text-small: 14px;
  --md-text-label: 12px;
  /* radius */
  --md-radius-chip: 5px;
  --md-radius-control: 10px;
  --md-radius-card: 14px;
  --md-radius-panel: 18px;
  --md-radius-pill: 999px;
  /* space */
  --md-space-1: 8px;
  --md-space-2: 16px;
  --md-space-3: 24px;
  --md-space-4: 32px;
  --md-space-5: 48px;
  --md-space-6: 64px;
  --md-space-section: 104px;
  --md-space-section-mobile: 76px;
  /* layout */
  --md-content-width: 1160px;
  --md-gutter: 20px;
  /* motion */
  --md-motion-fast: 150ms;
  --md-motion-base: 200ms;
  --md-motion-ease: cubic-bezier(.2,.7,.2,1);
}

/* Labels: // comment-style eyebrows */
.md-label { font-family: var(--md-font-mono); font-size: var(--md-text-label); color: var(--md-moss); }
.md-label::before { content: "// "; }
.md-on-dark .md-label { color: var(--md-lime); }

/* Buttons */
.md-btn { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--md-font-body); padding: 14px 24px; border-radius: var(--md-radius-control); border: 0; cursor: pointer; transition: background var(--md-motion-fast), transform var(--md-motion-fast); }
.md-btn-primary { background: var(--md-forest); color: var(--md-lime); }
.md-btn-primary:hover { background: var(--md-forest-deep); transform: translateY(-1px); }
.md-on-dark .md-btn-primary { background: var(--md-lime); color: var(--md-forest); }
.md-on-dark .md-btn-primary:hover { background: var(--md-lime-hover); }
.md-btn-secondary { background: transparent; color: var(--md-forest); border: 1.5px solid var(--md-forest); }
.md-on-dark .md-btn-secondary { color: var(--md-cream); border-color: rgba(244,241,234,.45); }

/* Chips, highlighter, grid */
.md-chip { display: inline-block; font: 500 11px/1.4 var(--md-font-mono); padding: 3px 8px; border-radius: var(--md-radius-chip); background: var(--md-sage-tint); color: var(--md-forest); }
.md-chip-signal { background: var(--md-lime); }
.md-highlight { background: linear-gradient(transparent 60%, var(--md-lime) 60%); }
.md-grid-bg { background-color: var(--md-forest); background-image: linear-gradient(rgba(198,243,107,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(198,243,107,.05) 1px, transparent 1px); background-size: 56px 56px; }

/* Focus ring (the kit's global :focus-visible rule, as an opt-in class) */
.md-focus :focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(198,243,107,.6); border-radius: var(--md-radius-control); }