/* ============================================================
   TCG Collection — Design System
   ------------------------------------------------------------
   CSS custom properties only. Component styles live in app.css.
   Phone-specific tweaks live in mobile.css.
   ============================================================ */

:root {
    /* ----- Brand palette ----- */
    --tcg-primary:        #6f42c1;   /* deep purple — magical / MTG-coded */
    --tcg-primary-dark:   #5a36a0;
    --tcg-primary-light:  #8a5cd6;
    --tcg-primary-soft:   #f3edff;   /* lavender wash for hover/selected */

    --tcg-secondary:      #d4a017;   /* gold — rarity / value */
    --tcg-secondary-dark: #b48613;
    --tcg-secondary-light:#e9b93c;

    /* ----- Neutrals ----- */
    --tcg-ink:        #1a1a1a;       /* charcoal — primary text */
    --tcg-ink-soft:   #4a4a4a;
    --tcg-mute:       #8a8a8a;
    --tcg-line:       #e3e0d8;
    --tcg-paper:      #faf8f3;       /* off-white — page bg */
    --tcg-surface:    #ffffff;       /* card / panel bg */
    --tcg-surface-2:  #f5f1e8;       /* sunken surface */

    /* ----- Semantic ----- */
    --tcg-success:    #2f9e44;
    --tcg-warning:    #d4a017;       /* re-uses gold */
    --tcg-danger:     #c92a2a;
    --tcg-info:       #1971c2;

    /* ----- Rarity (MTG-coded) ----- */
    --tcg-rarity-common:   #1a1a1a;
    --tcg-rarity-uncommon: #707d8a;
    --tcg-rarity-rare:     #c9a227;
    --tcg-rarity-mythic:   #d76b00;
    --tcg-rarity-special:  #6f42c1;

    /* ----- Color identity (WUBRG) ----- */
    --tcg-mana-w: #f8f6d8;
    --tcg-mana-u: #b3ceea;
    --tcg-mana-b: #a69f9d;
    --tcg-mana-r: #eb9f82;
    --tcg-mana-g: #c4d3ca;

    /* ----- Typography ----- */
    --tcg-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                     'Helvetica Neue', Arial, sans-serif;
    --tcg-font-mono: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
    --tcg-fs-xs:   0.75rem;
    --tcg-fs-sm:   0.875rem;
    --tcg-fs-md:   1rem;
    --tcg-fs-lg:   1.125rem;
    --tcg-fs-xl:   1.5rem;
    --tcg-fs-2xl:  2rem;

    /* ----- Spacing scale (4-pt grid) ----- */
    --tcg-s-1:  0.25rem;
    --tcg-s-2:  0.5rem;
    --tcg-s-3:  0.75rem;
    --tcg-s-4:  1rem;
    --tcg-s-5:  1.5rem;
    --tcg-s-6:  2rem;
    --tcg-s-7:  3rem;

    /* ----- Shape ----- */
    --tcg-radius-sm: 4px;
    --tcg-radius:    8px;
    --tcg-radius-lg: 14px;
    --tcg-radius-pill: 999px;

    /* ----- Elevation ----- */
    --tcg-shadow-1: 0 1px 2px rgba(26, 26, 26, 0.06);
    --tcg-shadow-2: 0 4px 12px rgba(26, 26, 26, 0.10);
    --tcg-shadow-3: 0 12px 32px rgba(26, 26, 26, 0.16);

    /* ----- Motion ----- */
    --tcg-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --tcg-dur-fast:   120ms;
    --tcg-dur:        200ms;

    /* ----- Tap target (Apple HIG floor) ----- */
    --tcg-tap-min: 44px;
}