/*
  Yalla Souq — design tokens (single source)
  Glass chrome on dark mesh + opaque paper panels for dense content.
  Admin overrides gold via --ys-accent-gold in app layout :root.
*/

:root {
    /* ——— Dark mesh shell ——— */
    --ys-mesh-base: #070b18;
    --ys-mesh-mid: #0a1228;
    --ys-mesh-deep: #0d1835;
    --ys-ink-on-mesh: #e8eefc;
    --ys-ink-on-mesh-bright: #f8fafc;
    --ys-muted-on-mesh: #94a3b8;
    --ys-subtle-on-mesh: #64748b;

    /* ——— Paper panels (cart, lists, checkout, account) ——— */
    --ys-paper: #f4f7fb;
    --ys-paper-warm: #fffbf5;
    --ys-paper-card: #ffffff;
    --ys-ink-on-paper: #0f172a;
    --ys-muted-on-paper: #64748b;
    --ys-link-on-paper: #b45309;
    --ys-line-light: #e2e8f0;
    --ys-line-warm: #e7dfd2;

    /* ——— Gold accent (fallback; admin sets --ys-accent-gold in layout) ——— */
    --ys-gold: var(--ys-accent-gold, #ffb800);
    --ys-gold-bright: var(--ys-accent-gold-bright, #ffd05a);
    --ys-gold-soft: var(--ys-accent-gold-soft, rgba(255, 184, 0, 0.15));

    /* ——— Glass chrome (header, dropdowns, modals) ——— */
    --ys-glass-bg: rgba(12, 22, 48, 0.52);
    --ys-glass-bg-strong: rgba(12, 22, 48, 0.92);
    --ys-glass-border: rgba(51, 65, 85, 0.6);
    --ys-glass-blur: 20px;
    --ys-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);

    /* ——— Auth dark panels ——— */
    --ys-auth-bg: #061827;
    --ys-auth-panel: rgba(255, 255, 255, 0.06);
    --ys-ink-on-auth: #f8fafc;

    /* ——— Shape ——— */
    --ys-radius: 16px;
    --ys-radius-lg: 20px;
    --ys-panel-max: 1280px;
    --ys-panel-gutter: 24px;

    /* ——— Spacing scale (consume in pages / listing / gold) ——— */
    --ys-space-1: 4px;
    --ys-space-2: 8px;
    --ys-space-3: 12px;
    --ys-space-4: 16px;
    --ys-space-5: 24px;
    --ys-space-6: 32px;

    /* ——— Type ramp ——— */
    --ys-text-xs: 12px;
    --ys-text-sm: 13px;
    --ys-text-md: 15px;
    --ys-text-lg: 18px;
    --ys-text-xl: 22px;

    /* Legacy aliases used in ys-platform-pages.css */
    --ys-ink: var(--ys-ink-on-paper);
    --ys-muted: var(--ys-muted-on-paper);
}

/* Canonical platform content panel — paper + dark ink */
html.ys-reference-shell .ys-platform-panel,
html.ys-reference-shell .ys-surface-light {
    background: var(--ys-paper) !important;
    color: var(--ys-ink-on-paper) !important;
}

html.ys-reference-shell .ys-platform-panel.ys-page-category,
html.ys-reference-shell .ys-page-category.ys-surface-light {
    background: var(--ys-paper) !important;
}