/* =========================================================================
   Boomerang Projects — Brand Tokens
   Drop-in CSS variables for the Boomerang Projects app and marketing site.
   Source of truth: boomerang-brand-guide.md (locked 2026-05-10).

   All color pairings used in production should preserve WCAG AA contrast.
   Use --pp-text-on-* tokens to safely place text on each colored surface.
   ========================================================================= */

:root {
  /* ----- Primary palette (Scholar Plum) ----- */
  --pp-primary:        #3B1E5E;  /* Scholar Plum — anchor, wordmark, headers, app chrome */
  --pp-secondary:      #B43A28;  /* Signal Coral — primary CTAs */
  --pp-accent:         #2F6B45;  /* Sage Forest — success states, "on track" badges */

  /* ----- Soft tints / surfaces ----- */
  --pp-soft-1:         #F4ECF7;  /* Plum Wash — card / info backgrounds */
  --pp-soft-2:         #FBE7E1;  /* Coral Wash — callouts, hover surfaces */

  /* ----- Primary tonal variants (for hover, active, focus states) ----- */
  --pp-primary-hover:  #2C1745;  /* darker plum */
  --pp-primary-active: #1F0F30;
  --pp-secondary-hover: #92301F;
  --pp-accent-hover:    #244E33;

  /* ----- Text-on-color tokens (always AA-compliant) ----- */
  --pp-text-on-primary:    #FFFFFF;
  --pp-text-on-secondary:  #FFFFFF;
  --pp-text-on-accent:     #FFFFFF;
  --pp-text-on-soft-1:     var(--pp-primary);
  --pp-text-on-soft-2:     var(--pp-primary);
  --pp-text-on-white:      var(--pp-ink-900);

  /* ----- Neutrals (shared across the brand family) ----- */
  --pp-ink-900:        #0E1116;  /* Body text */
  --pp-ink-700:        #3A4150;  /* Secondary text */
  --pp-ink-500:        #6C7280;  /* Tertiary / metadata */
  --pp-ink-400:        #A0A6B2;  /* Disabled, captions */
  --pp-surface:        #FFFFFF;  /* Default background */
  --pp-surface-alt:    #F6F8FB;  /* App canvas, cards */
  --pp-border:         #E2E6EE;  /* Dividers, input borders */
  --pp-border-strong:  #C8CFDA;

  /* ----- Semantic (use sparingly) ----- */
  --pp-success:        var(--pp-accent);
  --pp-warning:        #C77700;
  --pp-danger:         #B3261E;
  --pp-info:           #1F6FB2;

  /* ----- Typography (LOCKED 2026-05-10 — shared across Boomerang family) -----
     Wordmark + UI/headings: Montserrat (matches Boomerang Pass).
     Editorial display:      Playfair Display (matches Boomerang Pass).
     Load via Google Fonts:
       <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" />
  */
  --pp-font-wordmark:  "Montserrat", -apple-system, BlinkMacSystemFont,
                       "Segoe UI", Helvetica, Arial, sans-serif;
  --pp-font-heading:   "Montserrat", -apple-system, BlinkMacSystemFont,
                       "Segoe UI", Helvetica, Arial, sans-serif;
  --pp-font-body:      "Montserrat", -apple-system, BlinkMacSystemFont,
                       "Segoe UI", Helvetica, Arial, sans-serif;
  --pp-font-display:   "Playfair Display", Georgia, "Times New Roman", serif;
  --pp-font-mono:      "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Weights */
  --pp-fw-regular: 400;
  --pp-fw-medium:  500;
  --pp-fw-semibold: 600;
  --pp-fw-bold:    700;

  /* Type scale (px) — see brand guide §6 */
  --pp-fs-display: 48px;
  --pp-fs-h1:      36px;
  --pp-fs-h2:      28px;
  --pp-fs-h3:      22px;
  --pp-fs-h4:      18px;
  --pp-fs-body:    16px;
  --pp-fs-small:   14px;
  --pp-fs-tiny:    12px;

  /* Line heights */
  --pp-lh-tight:   1.15;
  --pp-lh-snug:    1.25;
  --pp-lh-normal:  1.5;

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

  /* ----- Radius ----- */
  --pp-radius-sm:    6px;
  --pp-radius-md:    8px;   /* buttons, inputs */
  --pp-radius-lg:    12px;  /* cards */
  --pp-radius-xl:    16px;  /* modals */
  --pp-radius-pill:  9999px;

  /* ----- Elevation (shadows) ----- */
  --pp-shadow-sm:  0 1px 2px rgba(14, 17, 22, 0.06);
  --pp-shadow-md:  0 4px 12px rgba(14, 17, 22, 0.08);
  --pp-shadow-lg:  0 12px 32px rgba(14, 17, 22, 0.12);

  /* ----- Containers ----- */
  --pp-container-narrow:  640px;   /* Forms, reading */
  --pp-container-default: 1080px;  /* App canvas */
  --pp-container-wide:    1280px;  /* Marketing */

  /* ----- Motion ----- */
  --pp-motion-fast:    120ms;
  --pp-motion-normal:  200ms;
  --pp-motion-slow:    320ms;
  --pp-easing:         cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* =========================================================================
   Optional: Tailwind-style theme bridge.
   If using Tailwind, you can mirror these tokens into tailwind.config.js
   under theme.extend.colors:
     primary:    'var(--pp-primary)',
     secondary:  'var(--pp-secondary)',
     accent:     'var(--pp-accent)',
     'soft-1':   'var(--pp-soft-1)',
     'soft-2':   'var(--pp-soft-2)',
   ========================================================================= */

/* =========================================================================
   Component starters — minimal, readable, swap into your component library.
   These give you AA-safe defaults out of the gate.
   ========================================================================= */

.pp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-space-2);
  padding: 12px 20px;
  font-family: var(--pp-font-heading);
  font-weight: var(--pp-fw-semibold);
  font-size: var(--pp-fs-body);
  border-radius: var(--pp-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--pp-motion-fast) var(--pp-easing),
              border-color   var(--pp-motion-fast) var(--pp-easing),
              transform      var(--pp-motion-fast) var(--pp-easing);
}

.pp-button:active { transform: translateY(1px); }

.pp-button--primary {
  background: var(--pp-secondary);
  color: var(--pp-text-on-secondary);
}
.pp-button--primary:hover { background: var(--pp-secondary-hover); }

.pp-button--secondary {
  background: transparent;
  color: var(--pp-primary);
  border-color: var(--pp-primary);
}
.pp-button--secondary:hover { background: var(--pp-soft-1); }

.pp-button--ghost {
  background: transparent;
  color: var(--pp-primary);
  border-color: transparent;
}
.pp-button--ghost:hover { background: var(--pp-soft-1); }

.pp-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  padding: var(--pp-space-5);
  box-shadow: var(--pp-shadow-sm);
}

.pp-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--pp-fs-small);
  font-weight: var(--pp-fw-semibold);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-accent);
  color: var(--pp-text-on-accent);
}

.pp-badge--neutral {
  background: var(--pp-soft-1);
  color: var(--pp-primary);
}

.pp-input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--pp-font-body);
  font-size: var(--pp-fs-body);
  color: var(--pp-ink-900);
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md);
  outline: none;
  transition: border-color var(--pp-motion-fast) var(--pp-easing),
              box-shadow   var(--pp-motion-fast) var(--pp-easing);
}
.pp-input:focus {
  border-color: var(--pp-primary);
  box-shadow: 0 0 0 3px rgba(59, 30, 94, 0.15);
}

.pp-link {
  color: var(--pp-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pp-link:hover { color: var(--pp-primary-hover); }