/* ============================================================
   StoreBridge — Design tokens (the one place colours resolve)

   theme-inject.php loads this file, then writes a small
   :root{ --seed-*: … } override for the active preset
   (see themes.php + the admin Theme page).

   • --seed-*   raw colours for the active preset. The values
                below are the built-in default (Sunset); PHP
                overrides them per preset at runtime.
   • semantic   what the rest of the CSS references (nav, hero,
                CTA, footer, buttons, text…). All derived from
                seeds, so changing a preset re-skins everything.
   • feedback   success / pending / danger — fixed, not themed.
   • legacy     old names kept so store.css / admin.css /
                get-listed.css keep resolving. Prefer semantic
                names in new code.
   ============================================================ */

:root {
    /* ── Seeds · active preset (default = Sunset) ──────────── */
    --seed-accent:        #e8611a;
    --seed-accent-strong: #c94f12;
    --seed-accent-soft:   #f6a878;
    --seed-accent-tint:   #fef1e8;
    --seed-accent-rgb:    232, 97, 26;
    --seed-ink:           #20242c;
    --seed-ink-2:         #343b46;
    --seed-text:          #23272f;
    --seed-text-muted:    #5d6570;
    --seed-text-faint:    #9aa1ac;
    --seed-page-bg:       #f8f7f5;
    --seed-surface:       #ffffff;
    --seed-surface-alt:   #fbfaf9;
    --seed-surface-mute:  #f1f2f4;
    --seed-border:        #e6e6e9;

    /* ── Semantic ─────────────────────────────────────────── */

    /* Brand */
    --brand:         var(--seed-accent);
    --brand-strong:  var(--seed-accent-strong);
    --brand-soft:    var(--seed-accent-soft);
    --brand-tint:    var(--seed-accent-tint);
    --text-on-brand: #ffffff;
    /* <meta name="theme-color"> can't read CSS vars — it uses
       sb_theme_accent() in PHP; keep that equal to --seed-accent. */

    /* Surfaces & text */
    --page-bg:      var(--seed-page-bg);
    --surface:      var(--seed-surface);
    --surface-alt:  var(--seed-surface-alt);
    --surface-mute: var(--seed-surface-mute);
    --text:         var(--seed-text);
    --text-muted:   var(--seed-text-muted);
    --text-faint:   var(--seed-text-faint);
    --heading:      var(--seed-ink);
    --border:       var(--seed-border);
    --link:         var(--brand);
    --link-hover:   var(--brand-strong);

    /* Navbar */
    --nav-bg:      var(--surface);
    --nav-fg:      var(--seed-ink);
    --nav-border:  var(--border);
    --nav-brand:   var(--brand);
    --nav-shadow:  0 1px 8px rgba(0, 0, 0, 0.06);
    --nav-tagline: var(--text-muted);

    /* Hero band */
    --hero-gradient: linear-gradient(135deg, var(--seed-accent-strong) 0%, var(--seed-accent) 48%, var(--seed-accent-soft) 100%);
    --hero-fg:       #ffffff;

    /* CTA banner */
    --cta-gradient:            linear-gradient(135deg, var(--seed-ink) 0%, var(--seed-ink-2) 100%);
    --cta-fg:                  #ffffff;
    --cta-fg-muted:            rgba(255, 255, 255, 0.72);
    --cta-btn-bg:              var(--brand);
    --cta-btn-bg-hover:        var(--brand-strong);
    --cta-btn-fg:              #ffffff;
    --cta-outline-bg:          rgba(255, 255, 255, 0.10);
    --cta-outline-bg-hover:    rgba(255, 255, 255, 0.16);
    --cta-outline-fg:          rgba(255, 255, 255, 0.85);
    --cta-outline-border:      rgba(255, 255, 255, 0.25);
    --cta-outline-border-hover: rgba(255, 255, 255, 0.45);

    /* Footer */
    --footer-bg:      var(--seed-ink);
    --footer-fg:      #ffffff;
    --footer-fg-mute: rgba(255, 255, 255, 0.45);
    --footer-accent:  var(--seed-accent-soft);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(var(--seed-accent-rgb), 0.18);

    /* ── Feedback · fixed (not themed) ────────────────────── */
    --c-green-700: #1a6b3a;
    --c-green-600: #1a7a4a;
    --c-green-500: #22a05a;
    --c-green-200: #a3e6bf;
    --c-green-050: #edfbf3;
    --c-green-bg:  #d6f2e3;
    --c-gold-600:  #92640a;
    --c-gold-500:  #e6a817;
    --c-gold-300:  #f5d87a;
    --c-gold-050:  #fef9ec;
    --c-red-700:   #991b1b;
    --c-red-050:   #fee2e2;
    --c-brown-300: #bba898;   /* neutral placeholder text used by store.css */

    --success:            var(--c-green-600);
    --success-bg:         var(--c-green-bg);
    --success-strong:     var(--c-green-500);
    --success-soft-bg:     var(--c-green-050);
    --success-soft-fg:     var(--c-green-700);
    --success-soft-border: var(--c-green-200);
    --pending-bg:     var(--c-gold-050);
    --pending-fg:     var(--c-gold-600);
    --pending-icon:   var(--c-gold-500);
    --pending-border: var(--c-gold-300);
    --danger:    var(--c-red-700);
    --danger-bg: var(--c-red-050);

    /* Shadows */
    --shadow:    0 2px 16px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

    /* ── Legacy aliases (kept so older rules resolve) ─────── */
    --cream:      var(--page-bg);
    --warm-100:   var(--surface-mute);
    --warm-200:   var(--border);
    --orange:     var(--brand);
    --orange-dk:  var(--brand-strong);
    --orange-lt:  var(--brand-tint);
    --brown:      var(--heading);
    --brown-mid:  var(--text-muted);
    --white:      var(--surface);
    --radius:     12px;
    --radius-sm:  7px;
}