/* ============================================================================
   ps-ui.css — PawSteps design system (SINGLE SOURCE OF TRUTH for tokens).
   Injected site-wide by ps-shell.js, exactly like ps-shell.css.

   HOW THIS IS SAFE (zero visual change on ship):
   Everything here lives inside `@layer psui`. Any rule a page declares in its
   own <style> (or inline) is UNLAYERED, and unlayered CSS always beats a layer
   regardless of source order. So on day one this file only *fills gaps* — it
   never overrides a page that already sets a value. Pages adopt these tokens
   only when their local hard-coded values are repointed to var(--ps-*).

   TOKEN NAMING: canonical tokens are namespaced --ps-* so they never clash with
   the --green-700 / --ink / --line etc. that individual pages already define.
   Legacy bare names are ALIASED below (e.g. --green -> var(--ps-green-700)) so
   old pages keep working; a page's own definition still wins (it's unlayered).

   RETIREMENT: styles.css (--green…) and pawsteps-ui.css (--g…) predate this and
   hold two divergent token sets. Once pages are migrated onto --ps-*, both can
   be retired. Do not add a THIRD token set — extend this file instead.

   COLOUR / AA NOTE: text-capable tokens are tuned to pass WCAG AA on white/cream:
     --ps-ink #22302a, --ps-ink-soft #5f6f6b, --ps-ink-faint #5f7068 (~5.3:1),
     --ps-green-700 #2f6b34 (~6.4:1), --ps-amber #9a6410 (~5:1).
   The a11y task should fix per-page *usages*, not these token values.
   ========================================================================== */

@layer psui {

  :root {
    /* ---- Brand green scale (built on #2f6b34, the canonical brand green) ---- */
    --ps-green-900:#1d4a22;
    --ps-green-700:#2f6b34;   /* brand */
    --ps-green-500:#3d8c44;
    --ps-green-100:#e6f5ea;
    --ps-green-50 :#f2f8ee;

    /* ---- Neutrals (AA-tuned for text on white/cream) ---- */
    --ps-ink      :#22302a;
    --ps-ink-soft :#5f6f6b;
    --ps-ink-faint:#5f7068;   /* darkened from the old #999 which FAILED AA */
    --ps-line     :#e0ece0;
    --ps-card     :#ffffff;
    --ps-bg       :#f2f8ee;
    --ps-cream    :#fafaf7;

    /* ---- Accents (+ light background pairs) ---- */
    --ps-amber   :#9a6410;  --ps-amber-bg :#fdf1da;
    --ps-coral   :#c0483e;  --ps-coral-bg :#fdecec;
    --ps-teal    :#2f7f96;  --ps-teal-bg  :#e4f3f3;
    --ps-purple  :#6b4bb0;  --ps-purple-bg:#efe9f7;
    --ps-gold    :#b58a1e;

    /* ---- Semantic ---- */
    --ps-success:#1e7a34;
    --ps-danger :#b3261e;
    --ps-warning:#9a6410;

    /* ---- Subject-accent set (wayfinding) ----
       The ONLY sanctioned per-subject accents. Every other subject uses brand
       green. Use accents on topbar / section dots / headings ONLY — never body
       text, links or UI (those stay on --ps-ink / --ps-green-700). Each value is
       AA on white (symmetric: safe as white-on-topbar AND accent-text-on-white). */
    --ps-subject-animals:#a85410;  /* burnt orange  5.33:1 */
    --ps-subject-history:#8a5a0e;  /* sepia gold    5.92:1 */
    --ps-subject-drama  :#c2185b;  /* theatre rose  5.87:1 */
    --ps-subject-music  :#7326a6;  /* purple        8.4:1 */

    /* ---- Spacing (4px base) ---- */
    --ps-sp-1:4px; --ps-sp-2:8px; --ps-sp-3:12px; --ps-sp-4:16px;
    --ps-sp-5:24px; --ps-sp-6:32px; --ps-sp-8:48px;

    /* ---- Radii ---- */
    --ps-r-xs:8px; --ps-r-sm:12px; --ps-r-md:16px; --ps-r-lg:20px;
    --ps-r-pill:999px; --ps-r-circle:50%;

    /* ---- Shadows ---- */
    --ps-sh-sm:0 1px 6px rgba(31,74,34,.08);
    --ps-sh-md:0 4px 16px rgba(31,74,34,.09);
    --ps-sh-lg:0 8px 26px rgba(31,74,34,.14);
    --ps-focus:0 0 0 3px rgba(47,107,52,.35);

    /* ---- Type scale ---- */
    --ps-fs-xs:.75rem; --ps-fs-sm:.85rem; --ps-fs-base:1rem; --ps-fs-lg:1.15rem;
    --ps-fs-xl:1.4rem; --ps-fs-2xl:1.8rem; --ps-fs-3xl:2.2rem;
    --ps-font-head:'Fredoka',system-ui,sans-serif;
    --ps-font-body:'Nunito',system-ui,sans-serif;

    /* Breakpoints (documented; media queries can't read vars):
       sm 480px · md 768px · lg 1040px */

    /* ================= LEGACY ALIASES =================
       Old bare names resolve to the canonical --ps-* tokens. A page's OWN
       definition of any of these still wins (this block is layered). */
    --green:var(--ps-green-700);
    --green-dk:var(--ps-green-900);
    --green-md:var(--ps-green-500);
    --green-lt:var(--ps-green-100);
    --green-soft:var(--ps-green-50);
    --g:var(--ps-green-700);
    --gd:var(--ps-green-900);
    --greenbg:var(--ps-green-100);
    --amber:var(--ps-amber);   --amberbg:var(--ps-amber-bg);
    --coral:var(--ps-coral);
    --red:var(--ps-coral);     --redbg:var(--ps-coral-bg);
    --teal:var(--ps-teal);
    --purple:var(--ps-purple);
    --coin:var(--ps-gold);
    --ink-soft:var(--ps-ink-soft);
    --ink-faint:var(--ps-ink-faint);
    --soft:var(--ps-ink-soft);
    --muted:var(--ps-ink-soft);
    --line:var(--ps-line);
    --card:var(--ps-card);
    --cream:var(--ps-cream);
    --r-sm:var(--ps-r-sm);
    --r-md:var(--ps-r-md);
    --r-lg:var(--ps-r-lg);
    --sh:var(--ps-sh-md);
    --shadow:var(--ps-sh-md);
    --sh-hover:var(--ps-sh-lg);
    --fred:var(--ps-font-head);
    --nun:var(--ps-font-body);
  }

  /* ============================================================================
     CANONICAL COMPONENTS — namespaced .ps-* so they never collide with a page's
     existing .btn / .card / .pill. A page opts in by using these class names.
     ========================================================================== */

  /* Buttons: .ps-btn (primary) · .ps-btn.secondary (outline) · .ps-btn.ghost */
  .ps-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    font-family:var(--ps-font-head); font-weight:700; font-size:var(--ps-fs-base);
    line-height:1; text-align:center; text-decoration:none; cursor:pointer;
    padding:.72em 1.35em; border-radius:var(--ps-r-sm);
    border:2px solid var(--ps-green-700); background:var(--ps-green-700); color:#fff;
    box-shadow:var(--ps-sh-sm); transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
  }
  .ps-btn:hover{ background:var(--ps-green-900); border-color:var(--ps-green-900); }
  .ps-btn:active{ transform:translateY(1px); }
  .ps-btn:focus-visible{ outline:none; box-shadow:var(--ps-focus); }
  .ps-btn.secondary{ background:#fff; color:var(--ps-green-700); }
  .ps-btn.secondary:hover{ background:var(--ps-green-50); color:var(--ps-green-900); }
  .ps-btn.ghost{ background:transparent; border-color:transparent; color:var(--ps-green-700); box-shadow:none; }
  .ps-btn.ghost:hover{ background:var(--ps-green-50); }
  .ps-btn[disabled],.ps-btn.is-disabled{ opacity:.5; cursor:not-allowed; }
  /* Orthogonal SIZE modifiers (compose with any style variant) — adopt small/full-width
     buttons without layout shift. NOT new style variants; the styles stay primary/secondary/ghost. */
  .ps-btn.sm{ padding:.42em .85em; font-size:var(--ps-fs-sm); }
  .ps-btn.wide{ width:100%; }

  /* Card */
  .ps-card{
    background:var(--ps-card); border:1px solid var(--ps-line);
    border-radius:var(--ps-r-lg); box-shadow:var(--ps-sh-md);
    padding:var(--ps-sp-5);
  }

  /* Pill / badge (+ status variants) */
  .ps-pill{
    display:inline-flex; align-items:center; gap:.4em;
    font-family:var(--ps-font-body); font-weight:800; font-size:var(--ps-fs-xs);
    padding:.28em .8em; border-radius:var(--ps-r-pill);
    background:var(--ps-green-100); color:var(--ps-green-900); white-space:nowrap;
  }
  .ps-pill.green{ background:var(--ps-green-100); color:var(--ps-success); }
  .ps-pill.amber{ background:var(--ps-amber-bg); color:var(--ps-amber); }
  .ps-pill.red  { background:var(--ps-coral-bg); color:var(--ps-coral); }

  /* Form field: input / select / textarea */
  .ps-field{
    width:100%; font-family:var(--ps-font-body); font-size:var(--ps-fs-base);
    color:var(--ps-ink); background:#fff;
    border:1.5px solid var(--ps-line); border-radius:var(--ps-r-sm);
    padding:.66em .9em;
  }
  .ps-field:focus{ outline:none; border-color:var(--ps-green-500); box-shadow:var(--ps-focus); }

  /* Link helper (opt-in; element `a` is left to pages) */
  .ps-link{ color:var(--ps-green-700); text-decoration:none; }
  .ps-link:hover{ text-decoration:underline; }
  .ps-link:focus-visible{ outline:none; box-shadow:var(--ps-focus); border-radius:3px; }

} /* @layer psui */