/*!
 * Ezi Market — Design tokens
 * Single source of truth for spacing, type, radii, colors and elevation.
 * Loaded *before* style.css so the marketplace shell inherits these values.
 */

:root {
    /* ─── Brand palette (EziMarket green + yellow accent) ─────
       The historical token names keep the `--ezi-red-*` prefix for
       backward compatibility with everywhere they are referenced
       across PHP / JS / inline styles. The VALUES are now the
       Canadian-green brand identity that matches the launcher icon. */
    --ezi-red-50:   #e8f9eb;
    --ezi-red-100:  #bce8c3;
    --ezi-red-500:  #22A93D;   /* primary brand (icon green) */
    --ezi-red-600:  #1C9134;
    --ezi-red-700:  #157229;

    /* Aliases that read sanely in new code. */
    --ezi-brand-50:  var(--ezi-red-50);
    --ezi-brand-100: var(--ezi-red-100);
    --ezi-brand-500: var(--ezi-red-500);
    --ezi-brand-600: var(--ezi-red-600);
    --ezi-brand-700: var(--ezi-red-700);
    --ezi-brand-yellow:      #FED724;
    --ezi-brand-yellow-dark: #E5BC10;

    --ezi-ink-900:  #0f172a;
    --ezi-ink-800:  #1e293b;
    --ezi-ink-700:  #334155;
    --ezi-ink-500:  #64748b;
    --ezi-ink-400:  #94a3b8;
    --ezi-ink-200:  #e2e8f0;
    --ezi-ink-100:  #f1f5f9;
    --ezi-ink-50:   #f8fafc;

    --ezi-accent-500: #FED724;     /* yellow accent (icon highlight) */
    --ezi-success:    #16a34a;
    --ezi-warn:       #f59e0b;
    --ezi-danger:     #dc2626;

    /* ─── Surface ────────────────────────────────────────────── */
    --ezi-surface:        #ffffff;
    --ezi-surface-muted:  #f8fafc;
    --ezi-border:         rgba(15, 23, 42, 0.08);
    --ezi-divider:        rgba(15, 23, 42, 0.06);

    /* ─── Typography (fluid via clamp) ───────────────────────── */
    --ezi-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --ezi-text-xs:  clamp(0.72rem, 0.6vw + 0.55rem, 0.78rem);
    --ezi-text-sm:  clamp(0.82rem, 0.4vw + 0.7rem,  0.9rem);
    --ezi-text-md:  clamp(0.95rem, 0.3vw + 0.85rem, 1.0rem);
    --ezi-text-lg:  clamp(1.05rem, 0.4vw + 0.9rem,  1.15rem);
    --ezi-text-xl:  clamp(1.18rem, 0.6vw + 1.0rem,  1.4rem);
    --ezi-text-2xl: clamp(1.4rem,  1vw   + 1.05rem, 1.85rem);
    --ezi-text-3xl: clamp(1.8rem,  1.5vw + 1.2rem,  2.4rem);

    /* ─── Spacing (rem-based, 4pt grid) ──────────────────────── */
    --ezi-space-1: 0.25rem;
    --ezi-space-2: 0.5rem;
    --ezi-space-3: 0.75rem;
    --ezi-space-4: 1rem;
    --ezi-space-5: 1.25rem;
    --ezi-space-6: 1.5rem;
    --ezi-space-8: 2rem;
    --ezi-space-10: 2.5rem;
    --ezi-space-12: 3rem;

    /* ─── Radii ──────────────────────────────────────────────── */
    --ezi-radius-sm: 6px;
    --ezi-radius-md: 10px;
    --ezi-radius-lg: 16px;
    --ezi-radius-xl: 22px;
    --ezi-radius-pill: 999px;

    /* ─── Elevation ──────────────────────────────────────────── */
    --ezi-shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
    --ezi-shadow-2: 0 4px 12px rgba(15, 23, 42, .08), 0 1px 4px rgba(15, 23, 42, .04);
    --ezi-shadow-3: 0 10px 24px rgba(15, 23, 42, .12), 0 2px 8px rgba(15, 23, 42, .06);
    --ezi-shadow-pop: 0 14px 40px rgba(15, 23, 42, .18);

    /* ─── Safe-area insets (iOS notch + Android gesture bar) ──── */
    --ezi-sat: env(safe-area-inset-top);
    --ezi-sar: env(safe-area-inset-right);
    --ezi-sab: env(safe-area-inset-bottom);
    --ezi-sal: env(safe-area-inset-left);

    /* ─── Layout constants ──────────────────────────────────── */
    --ezi-topbar-h:  56px;
    --ezi-bottomnav-h: 64px;
    --ezi-container-max: 1200px;
    --ezi-grid-gap: 12px;

    /* ─── Z-index ────────────────────────────────────────────── */
    --ezi-z-topbar: 1040;
    --ezi-z-bottomnav: 1045;
    --ezi-z-sheet: 1055;
    --ezi-z-banner: 1060;
    --ezi-z-toast:  1080;
}

[data-bs-theme="dark"] {
    --ezi-surface:       #0f0f1a;
    --ezi-surface-muted: #161625;
    --ezi-border:        rgba(255, 255, 255, .08);
    --ezi-divider:       rgba(255, 255, 255, .06);

    --ezi-ink-900: #f8fafc;
    --ezi-ink-800: #e2e8f0;
    --ezi-ink-700: #cbd5e1;
    --ezi-ink-500: #94a3b8;
    --ezi-ink-400: #64748b;
    --ezi-ink-200: rgba(255, 255, 255, .1);
    --ezi-ink-100: rgba(255, 255, 255, .06);
}