/* ============================================================
   PlanGrade — tokens + typography
   Brand scale is ink blue with an amber accent. The aliases the page
   CSS relies on (--cream, --border, --text-soft, …) map onto the
   --pg-* tokens below; add new values as tokens, not inline hex.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand ink-blue scale ──────────────────────────────── */
  --pg-brand-50:  #eef3f9;
  --pg-brand-100: #d6e2f0;
  --pg-brand-200: #aec5e1;
  --pg-brand-300: #7fa2cc;
  --pg-brand-400: #5584b8;
  --pg-brand-500: #3a6aa0;
  --pg-brand-600: #2c5585;   /* links, secondary */
  --pg-brand-700: #22446b;
  --pg-brand-800: #1a3552;   /* header background */
  --pg-brand-900: #0f2135;

  /* ── Amber scale (action / accent) ─────────────────────── */
  --pg-amber-50:  #fdf3e7;
  --pg-amber-100: #fae3c2;
  --pg-amber-200: #f5c88a;
  --pg-amber-400: #f0a854;
  --pg-amber-600: #c97d2e;   /* primary CTA */
  --pg-amber-700: #a36423;
  --pg-amber-800: #7a4a19;

  /* ── Neutrals ───────────────────────────────────────────── */
  --pg-paper:     #f8f9fb;   /* page canvas */
  --pg-surface:   #ffffff;
  --pg-surface-2: #eef1f5;
  --pg-line:      #d9dee6;
  --pg-line-strong: #c3cad5;

  /* ── Ink / text ─────────────────────────────────────────── */
  --pg-ink-900: #1a2633;
  --pg-ink-600: #4a5568;
  --pg-ink-400: #5f6b7a;     /* clears 4.5:1 on every surface used */
  --pg-ink-200: #a0aec0;
  --pg-ink-100: #e2e8f0;

  /* ── Semantic colors ────────────────────────────────────── */
  --pg-success-100: #d1fae5; --pg-success-600: #065f46;
  --pg-warn-100:    #fef3c7; --pg-warn-600:    #b45309;
  --pg-danger-100:  #fee2e2; --pg-danger-600:  #dc2626;
  --pg-info-100:    #dbeafe; --pg-info-600:    #2563eb; --pg-info-700: #1d4ed8;

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Inter', sans-serif;
  --font-logo:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Fira Code', monospace;
  --tracking-subtitle: 0.1em;

  /* ── Radius ─────────────────────────────────────────────── */
  --pg-radius-sm:  4px;
  --pg-radius-md:  6px;
  --pg-radius-lg:  10px;
  --pg-radius-xl:  16px;
  --pg-radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --pg-shadow-xs: 0 1px 3px rgba(26,38,51,0.08);
  --pg-shadow-sm: 0 2px 6px rgba(26,38,51,0.08);
  --pg-shadow-md: 0 4px 12px rgba(26,38,51,0.10);
  --pg-shadow-lg: 0 8px 24px rgba(26,38,51,0.12);

  /* ── Motion ─────────────────────────────────────────────── */
  --pg-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pg-dur-ui: 160ms;

  /* ── Aliases the page CSS uses ──────────────────────────── */
  --green-deep:  var(--pg-brand-800);
  --green-mid:   var(--pg-brand-600);
  --green-light: var(--pg-brand-400);
  --amber:       var(--pg-amber-600);
  --amber-light: var(--pg-amber-400);
  --cream:       var(--pg-paper);
  --cream-dark:  var(--pg-surface-2);
  --border:      var(--pg-line);
  --white:       var(--pg-surface);
  --text-dark:   var(--pg-ink-900);
  --text-mid:    var(--pg-ink-600);
  --text-soft:   var(--pg-ink-400);
  --shadow-sm:   var(--pg-shadow-xs);
  --shadow-md:   var(--pg-shadow-md);
  --radius:      var(--pg-radius-lg);
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Lockup: the mark is a grade tile with a P in it */
.pg-lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.pg-lockup .mark { height: 40px; width: 40px; flex-shrink: 0; display: block; }
.pg-lockup .wordmark {
  font-family: var(--font-logo); font-weight: 800; letter-spacing: -0.01em;
  line-height: 1; font-size: 1.35rem; white-space: nowrap;
}
.pg-lockup .wordmark span { color: var(--pg-amber-400); }
.pg-lockup .subtitle {
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--tracking-subtitle); font-size: 0.6rem; opacity: 0.75; margin-top: 4px; white-space: nowrap;
}
@media (max-width: 480px) {
  .pg-lockup .subtitle { white-space: normal; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}