/*
 * RootedPost design tokens — single source of truth for color, typography,
 * radius. Linked from every public/<page>/index.html via <link rel="stylesheet"
 * href="/tokens.css">. Page-level <style> blocks should reference these
 * variables instead of literal hex values.
 *
 * Vocabulary
 * ----------
 * Two systems coexist on purpose:
 *
 *   1. SCALE tokens (--green-50 .. --green-900, --ink, --ink-mute, etc.)
 *      Numeric brand palette + named inks. Used by the dashboard, landing,
 *      onboarding, and most existing pages. Reach for these when you need
 *      a specific shade.
 *
 *   2. SEMANTIC tokens (--accent, --warn, --error, --info, --surface, ...)
 *      Intent-driven names that map to the scale. Used by the approval
 *      page and any new components. Reach for these when you mean "the
 *      primary action color" or "the warning surface."
 *
 * Both resolve to the same hex values via var() chains — semantic names are
 * just aliases on the scale. New code should prefer semantic names because
 * they survive palette changes; existing code that uses scale tokens is fine.
 *
 * Adding a token
 * --------------
 * - Define the literal value in the scale section
 * - Add a semantic alias only when the use is genuinely intent-driven
 * - Don't introduce a token used by exactly one rule on one page
 *
 * Removing a token
 * ----------------
 * Grep before deleting — these are referenced across every page.
 */
:root {
  /* --- Brand green scale --- */
  --green-900: #1f4e39;
  --green-700: #2d6a4f;
  --green-500: #52b788;
  --green-300: #74c69d;
  --green-100: #d5ecd9;
  --green-50:  #eef6ef;

  /* --- Ink (text) palette --- */
  --ink:        #1a1a1a;
  --ink-soft:   #444444;
  --ink-mute:   #5e5e5e;  /* meets WCAG 4.5:1 on #ffffff and #f7f5f0 */
  --ink-faint:  #8a8a8a;  /* decorative only — fails AA for text */

  /* --- Surfaces --- */
  --surface:        #ffffff;
  --surface-alt:    #f7f5f0;   /* warm off-white — page background */
  --surface-soft:   #f9f9f9;   /* soft inset (inputs, callouts) */
  --surface-line:   #eef0f3;   /* hairline dividers in cool-grey contexts */
  /* Aliases used by the dashboard / landing / forms — same value, different
     naming convention. Either is fine; new code should prefer --surface-alt. */
  --bg:     var(--surface-alt);
  --bg-alt: #fbfaf6;           /* slightly lighter than --bg, for layered cards */

  /* --- Borders --- */
  --border:        #e8e3d8;    /* warm beige — pairs with brand greens */
  --border-strong: #c0c7d0;
  --line: var(--border);       /* alias used by dashboard, landing, forms */

  /* --- Status palettes --- */
  --warn:         #b9622a;
  --warn-strong:  #8a5a00;     /* text on warn-bg */
  --warn-bg:      #fff7e6;
  --warn-border:  #f5d39a;

  --error:        #c0392b;
  --error-strong: #962b20;     /* text on error-bg */
  --error-bg:     #fdecea;
  --error-border: #e29178;
  --err: var(--error);         /* alias used by activate / form pages */

  --info:         #2980b9;
  --info-strong:  #1a5276;     /* text on info-bg */
  --info-bg:      #e3eef7;

  /* "Media variant" purple — used for the AI-image badge and the video-script
     chip. Sits alongside (but distinct from) the brand-green palette so that
     "this content came from / is a variant of something else" reads as its
     own semantic family. Two uses today; expand if a third media-variant
     surface appears. */
  --media-bg:     #f3e8fb;
  --media-strong: #6c3483;

  /* --- Hover/pressed companions --- */
  /* Slightly-darker fill for hover states on neutral chips/buttons whose
     idle background is --surface-line. Used by .btn-secondary, .btn-undo. */
  --surface-line-strong: #dde0e5;
  /* Hover fill for soft-danger buttons whose idle background is --error-bg. */
  --error-bg-strong:     #f5c6c1;
  /* Deeper warn ink — used for warn-bg link/CTA hover where --warn-strong
     would not give enough lift. */
  --warn-deep:           #5b431a;

  /* --- Bootstrap-era status palette (legacy badges) ---
     Status badges historically used Bootstrap's alert hex values. Tokenized
     here so they're swappable in one place. New status visuals should prefer
     the semantic --warn / --error / --info / --accent families. */
  --status-success-bg:   #d4edda;
  --status-success-text: #155724;
  --status-error-bg:     #f8d7da;
  --status-error-text:   #721c24;
  --status-info-bg:      #cce5ff;
  --status-info-text:    #004085;
  --status-pending-bg:   #fff3cd;

  /* --- Semantic shortcuts (alias the scale) --- */
  --accent:           var(--green-700);
  --accent-hover:     var(--green-900);
  --accent-text:      var(--green-900);
  --accent-bg:        var(--green-50);
  --accent-bg-strong: var(--green-100);

  /* --- A11y --- */
  --focus-ring: var(--green-700);

  /* --- Radius scale --- */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/*
 * A11y: honor OS-level reduced-motion. Lives here (the single global
 * stylesheet) so every page gets it for free without each <style> block
 * needing to remember. We don't disable motion outright — collapse to ~0
 * so animation-end / transitionend handlers still fire (state machines
 * that rely on them won't lock up). WCAG 2.3.3 best practice.
 */
@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;
  }
}

/*
 * Toasts — transient, non-blocking notices. Paired with /toast.js (window.toast).
 * Replaces alert() across the app. Enter ease-out (starts fast = responsive),
 * exit faster; transitions (not keyframes) so rapid-fire toasts retarget
 * smoothly. The global reduced-motion rule above collapses these to instant.
 */
.rp-toasts {
  position: fixed; z-index: 1000;
  bottom: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none; /* container ignores clicks; toasts re-enable below */
}
.rp-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink-mute);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px; line-height: 1.45;
  box-shadow: 0 4px 18px rgba(31, 78, 57, 0.10), 0 1px 4px rgba(31, 78, 57, 0.06);
  /* From-state: nudged down + transparent. Never scale(0) — things don't
     appear from nothing. Enter is ease-out for instant-feeling feedback. */
  opacity: 0; transform: translateY(8px);
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.rp-toast[data-show] { opacity: 1; transform: translateY(0); }
/* Exit is quicker than enter — system responding should feel snappy. */
.rp-toast[data-leaving] {
  opacity: 0; transform: translateY(8px);
  transition-duration: 150ms;
}
.rp-toast--error   { border-left-color: var(--error); }
.rp-toast--success { border-left-color: var(--green-500); }
.rp-toast--info    { border-left-color: var(--info); }
.rp-toast__msg { flex: 1; }
.rp-toast__close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--ink-mute); font-size: 18px; line-height: 1;
  padding: 0 2px; margin: -1px -3px 0 0; font-family: inherit;
  border-radius: var(--radius-sm);
  transition: color 140ms ease-out;
}
.rp-toast__close:hover { color: var(--ink); }
.rp-toast__close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 480px) {
  .rp-toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}