/*
 * F! Gallery — Shared Design Tokens
 *
 * Added 2026-07-11. One canonical set of CSS custom properties for every
 * front-end/admin stylesheet in this plugin (fm-dashboard.css, fm-profile.css,
 * fm-admin.css) to build on, instead of each file hand-declaring its own copy
 * of the same colors/radius/shadow values — which had drifted out of sync
 * (fm-dashboard.css and fm-profile.css disagreed on --fm-text and
 * --fm-radius-lg; fm-admin.css didn't use variables at all and repeated raw
 * hex literals dozens of times).
 *
 * Scoped to :root deliberately, not a wrapper class. That's safe here even
 * though this plugin's component CSS is normally scoped to .fm-dashboard-wrap
 * / .fm-artist-profile to avoid touching the host theme's actual styles —
 * custom property NAMES don't render anything by themselves, they only take
 * effect where something explicitly writes var(--fm-...), and no WordPress
 * theme is going to coincidentally use these exact plugin-prefixed names.
 * Declaring them once on :root, instead of duplicating the same block inside
 * every wrapper class, is what actually lets one edit here update every
 * consumer at once.
 *
 * Anything genuinely context-specific stays out of this file and lives where
 * it's used instead — the dashboard's theme-detected accent color
 * (--fg-accent, set per-request in FG_Assets::enqueue_frontend()) and the
 * public profile's per-vendor accent/font/banner overrides
 * (--fm-accent, --fm-font-heading, --fm-font-body, set inline per vendor in
 * templates/default/artist-profile.php) are not shared defaults, so they're
 * not defined here.
 *
 * @package FrickingGallery
 * @since   1.0.40
 */

:root {
	/* ── Brand ─────────────────────────────────────────────────────────
	   Shared fallback only. The dashboard overrides this via --fg-accent
	   (theme-detected or admin-set) and the profile page overrides it
	   per-vendor via its own --fm-accent — both layer on top of this,
	   they don't replace it as a concept. */
	--fm-primary:        #1d4ed8;
	--fm-primary-hover:  #1e40af;

	/* ── Text ──────────────────────────────────────────────────────────
	   For UI chrome (buttons, labels, tables, badges) only. Body copy and
	   headings inherit the host theme's own color via `inherit` /
	   `currentColor` — these tokens are never applied to prose. */
	--fm-text:           #111827;
	--fm-body:           #374151;
	--fm-muted:          #6b7280;
	--fm-subtle:         #9ca3af;

	/* ── Surfaces & borders ────────────────────────────────────────────── */
	--fm-surface:        #ffffff;
	--fm-bg:             #f9fafb;
	--fm-bg-inset:       #f3f4f6;
	--fm-border:         #e5e7eb;
	--fm-border-strong:  #c3c4c7;
	/* Deliberately a separate, slightly darker gray from --fm-border —
	   used specifically for form input borders (text fields, selects,
	   textareas) across all three stylesheets, never for cards/tables. */
	--fm-input-border:   #d1d5db;

	/* ── Semantic (status colors) ──────────────────────────────────────── */
	--fm-success:        #16a34a;
	--fm-success-bg:     #ecfdf5;
	--fm-success-text:   #065f46;
	--fm-warning:        #d97706;
	--fm-warning-bg:     #fffbeb;
	--fm-warning-text:   #92400e;
	--fm-danger:         #dc2626;
	--fm-danger-bg:      #fef2f2;
	--fm-danger-text:    #991b1b;
	--fm-info:           #2563eb;
	--fm-info-bg:        #eff6ff;
	--fm-info-text:      #1e40af;

	/* Focus ring — shares --fm-info's blue but needs an alpha channel,
	   which can't be derived from a hex var() without a color-mix()
	   fallback story we don't need yet, so it's its own token. */
	--fm-focus-ring:     rgba(37,99,235,.15);

	/* ── Shape ─────────────────────────────────────────────────────────── */
	--fm-radius:         6px;
	--fm-radius-lg:      8px;
	--fm-radius-pill:    999px;
	--fm-shadow:         0 1px 3px rgba(0,0,0,.08);
	--fm-shadow-lg:      0 20px 40px rgba(0,0,0,.15);

	/* ── Spacing scale ─────────────────────────────────────────────────
	   Reach for these instead of a new one-off px value when laying out
	   or re-laying-out a screen — the point of a scale is that future
	   element reconfiguration reuses the same handful of gaps rather than
	   inventing new numbers each time. */
	--fm-space-1: 4px;
	--fm-space-2: 8px;
	--fm-space-3: 12px;
	--fm-space-4: 16px;
	--fm-space-5: 20px;
	--fm-space-6: 24px;
	--fm-space-8: 32px;

	/* ── Type scale (UI chrome only — see note under Text above) ───────── */
	--fm-text-xs:   11px;
	--fm-text-sm:   12px;
	--fm-text-base: 13px;
	--fm-text-md:   14px;
	--fm-text-lg:   15px;
	--fm-text-xl:   18px;
	--fm-text-2xl:  20px;
	--fm-text-3xl:  28px;
}