/**
 * Modlino Design System — Tokens
 * Single source of truth برای رنگ، spacing، typography، motion
 * ─────────────────────────────────────────────────────────────
 */

:root {
    /* ═══ COLORS ═══════════════════════════════════════════════ */

    /* Brand (Rose) */
    --m-color-brand-50:  #fff1f2;
    --m-color-brand-100: #ffe4e6;
    --m-color-brand-200: #fecdd3;
    --m-color-brand-300: #fda4af;
    --m-color-brand-400: #fb7185;
    --m-color-brand-500: #f43f5e;
    --m-color-brand-600: #e11d48;  /* PRIMARY */
    --m-color-brand-700: #be123c;
    --m-color-brand-800: #9f1239;
    --m-color-brand-900: #881337;

    /* Neutral (Slate) */
    --m-color-neutral-0:   #ffffff;
    --m-color-neutral-50:  #f9fafb;
    --m-color-neutral-100: #f3f4f6;
    --m-color-neutral-200: #e5e7eb;
    --m-color-neutral-300: #d1d5db;
    --m-color-neutral-400: #9ca3af;
    --m-color-neutral-500: #6b7280;
    --m-color-neutral-600: #4b5563;
    --m-color-neutral-700: #374151;
    --m-color-neutral-800: #1f2937;
    --m-color-neutral-900: #111827;

    /* Semantic */
    --m-color-success-bg:   #ecfdf5;
    --m-color-success-fg:   #065f46;
    --m-color-success-border: #a7f3d0;
    --m-color-success-solid: #10b981;

    --m-color-warning-bg:   #fffbeb;
    --m-color-warning-fg:   #92400e;
    --m-color-warning-border: #fde68a;
    --m-color-warning-solid: #f59e0b;

    --m-color-danger-bg:    #fef2f2;
    --m-color-danger-fg:    #991b1b;
    --m-color-danger-border: #fecaca;
    --m-color-danger-solid: #ef4444;

    --m-color-info-bg:      #eff6ff;
    --m-color-info-fg:      #1e3a8a;
    --m-color-info-border:  #bfdbfe;
    --m-color-info-solid:   #3b82f6;

    /* Semantic aliases (use these, not raw colors) */
    --m-primary:        var(--m-color-brand-600);
    --m-primary-hover:  var(--m-color-brand-700);
    --m-primary-soft:   var(--m-color-brand-50);
    --m-primary-bg:     var(--m-color-brand-100);

    --m-bg:             var(--m-color-neutral-0);    /* صفحه پایه */
    --m-bg-subtle:      var(--m-color-neutral-50);   /* بخش‌های ثانوی */
    --m-bg-muted:       var(--m-color-neutral-100);  /* hover states */

    --m-surface:        var(--m-color-neutral-0);    /* card */
    --m-surface-raised: var(--m-color-neutral-0);    /* modal */

    --m-text:           var(--m-color-neutral-800);  /* اصلی */
    --m-text-muted:     var(--m-color-neutral-500);  /* فرعی */
    --m-text-strong:    var(--m-color-neutral-900);  /* heading */
    --m-text-on-brand:  #ffffff;
    --m-text-link:      var(--m-color-brand-600);

    --m-border:         var(--m-color-neutral-200);
    --m-border-strong:  var(--m-color-neutral-300);
    --m-border-focus:   var(--m-color-brand-600);

    /* ═══ TYPOGRAPHY ═══════════════════════════════════════════ */

    --m-font-sans: 'Vazirmatn', Tahoma, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --m-font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;

    /* Type scale (1.125 ratio) */
    --m-text-2xs:   0.6875rem;   /* 11px - tags, micro */
    --m-text-xs:    0.75rem;     /* 12px - captions */
    --m-text-sm:    0.8125rem;   /* 13px - secondary */
    --m-text-base:  0.875rem;    /* 14px - body */
    --m-text-md:    0.9375rem;   /* 15px - emphasis */
    --m-text-lg:    1rem;        /* 16px - card title */
    --m-text-xl:    1.125rem;    /* 18px - section heading */
    --m-text-2xl:   1.25rem;     /* 20px */
    --m-text-3xl:   1.5rem;      /* 24px - product title */
    --m-text-4xl:   1.875rem;    /* 30px - page title */
    --m-text-5xl:   2.25rem;     /* 36px - hero */
    --m-text-6xl:   3rem;        /* 48px - landing hero */

    --m-leading-tight:   1.25;
    --m-leading-snug:    1.4;
    --m-leading-normal:  1.6;
    --m-leading-relaxed: 1.75;
    --m-leading-loose:   1.9;

    --m-weight-normal:   400;
    --m-weight-medium:   500;
    --m-weight-semibold: 600;
    --m-weight-bold:     700;
    --m-weight-extrabold: 800;

    /* ═══ SPACING (4px base) ═══════════════════════════════════ */

    --m-space-0:  0;
    --m-space-1:  0.25rem;   /* 4 */
    --m-space-2:  0.5rem;    /* 8 */
    --m-space-3:  0.75rem;   /* 12 */
    --m-space-4:  1rem;      /* 16 */
    --m-space-5:  1.25rem;   /* 20 */
    --m-space-6:  1.5rem;    /* 24 */
    --m-space-7:  1.75rem;   /* 28 */
    --m-space-8:  2rem;      /* 32 */
    --m-space-10: 2.5rem;    /* 40 */
    --m-space-12: 3rem;      /* 48 */
    --m-space-16: 4rem;      /* 64 */
    --m-space-20: 5rem;      /* 80 */
    --m-space-24: 6rem;      /* 96 */

    /* ═══ RADIUS ═══════════════════════════════════════════════ */

    --m-radius-xs:   2px;
    --m-radius-sm:   6px;
    --m-radius-md:   8px;
    --m-radius-lg:   12px;
    --m-radius-xl:   16px;
    --m-radius-2xl:  20px;
    --m-radius-3xl:  24px;
    --m-radius-full: 9999px;

    /* ═══ SHADOWS ══════════════════════════════════════════════ */

    --m-shadow-none: none;
    --m-shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.04);
    --m-shadow-sm:   0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --m-shadow-md:   0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --m-shadow-lg:   0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
    --m-shadow-xl:   0 24px 48px rgba(15, 23, 42, 0.12), 0 12px 24px rgba(15, 23, 42, 0.08);
    --m-shadow-brand: 0 8px 24px rgba(225, 29, 72, 0.25);
    --m-shadow-brand-strong: 0 12px 32px rgba(225, 29, 72, 0.35);

    /* ═══ MOTION ═══════════════════════════════════════════════ */

    --m-duration-instant: 50ms;
    --m-duration-fast:    150ms;
    --m-duration-normal:  200ms;
    --m-duration-slow:    300ms;
    --m-duration-slower:  500ms;

    --m-ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
    --m-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --m-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
    --m-ease-spring:     cubic-bezier(0.5, 1.5, 0.65, 1);

    /* ═══ Z-INDEX ══════════════════════════════════════════════ */

    --m-z-base:     0;
    --m-z-raised:   10;
    --m-z-dropdown: 100;
    --m-z-sticky:   200;
    --m-z-overlay:  1000;
    --m-z-modal:    2000;
    --m-z-toast:    9999;

    /* ═══ LAYOUT ═══════════════════════════════════════════════ */

    --m-container-max: 1290px;
    --m-container-gutter: 20px;
    --m-container-gutter-mobile: 16px;

    --m-header-height: 76px;
    --m-header-height-mobile: 64px;

    /* ═══ COMPONENT TOKENS ═════════════════════════════════════ */

    /* Button */
    --m-button-h-sm:  32px;
    --m-button-h-md:  40px;
    --m-button-h-lg:  48px;
    --m-button-h-xl:  56px;
    --m-button-px-sm: 12px;
    --m-button-px-md: 18px;
    --m-button-px-lg: 24px;
    --m-button-px-xl: 32px;

    /* Input */
    --m-input-h:       44px;
    --m-input-px:      14px;
    --m-input-radius:  var(--m-radius-md);

    /* Card */
    --m-card-radius:   var(--m-radius-xl);
    --m-card-padding:  var(--m-space-6);
    --m-card-bg:       var(--m-surface);
    --m-card-border:   1px solid var(--m-border);
    --m-card-shadow:   var(--m-shadow-sm);

    /* Product card (loop) — minimal premium */
    --m-product-card-price-size: 1.0625rem;  /* 17px */
    --m-shadow-card:        0 1px 2px rgba(15, 23, 42, 0.03);
    --m-shadow-card-hover:  0 6px 16px rgba(15, 23, 42, 0.08);

    /* === Override Blocksy palette so its components inherit our brand === */
    --theme-palette-color-1: var(--m-primary);
    --theme-palette-color-2: var(--m-primary-hover);
    --theme-palette-color-3: var(--m-color-neutral-800);
    --theme-palette-color-4: var(--m-color-neutral-900);
    --theme-palette-color-5: var(--m-border);
    --theme-palette-color-6: #f9fafb;
    --theme-palette-color-7: #ffffff;
    --theme-palette-color-8: #ffffff;
    --theme-font-stack-default: var(--m-font-sans);
}

/* Mobile token adjustments */
@media (max-width: 768px) {
    :root {
        --m-container-gutter: var(--m-container-gutter-mobile);
        --m-text-3xl: 1.25rem;
        --m-text-4xl: 1.5rem;
        --m-text-5xl: 1.875rem;
        --m-text-6xl: 2.25rem;
    }
}