/* =============================================================================
   QUPITO DESIGN TOKENS
   Единственный источник истины для всех визуальных значений.
   Hex/rgba значения не должны появляться в других CSS-файлах — только ссылки на переменные отсюда.
   ============================================================================= */

/* =============================================================================
   УРОВЕНЬ 1 — RAW PALETTE
   Конкретные значения. Не использовать напрямую в компонентах — только через semantic.
   ============================================================================= */

:root {
    /* Amber */
    --color-amber-50:   #fffbeb;
    --color-amber-100:  #fef3c7;
    --color-amber-200:  #fde68a;
    --color-amber-300:  #fcd34d;
    --color-amber-400:  #f59e0b;
    --color-amber-600:  #d97706;
    --color-amber-700:  #b45309;
    --color-amber-800:  #c86c1a;
    --color-amber-900:  #8f4b16;

    /* Green */
    --color-green-50:   #ecfdf5;
    --color-green-100:  #d1fae5;
    --color-green-200:  #a7f3d0;
    --color-green-300:  #bbf7d0;
    --color-green-700:  #047857;
    --color-green-800:  #127c5a;

    /* Gray */
    --color-gray-50:    #f9fafb;
    --color-gray-100:   #f3f4f6;
    --color-gray-200:   #e5e7eb;
    --color-gray-300:   #d1d5db;
    --color-gray-400:   #9ca3af;
    --color-gray-500:   #6b7280;
    --color-gray-600:   #4b5563;
    --color-gray-700:   #374151;
    --color-gray-800:   #1f2937;
    --color-gray-900:   #111827;

    /* Red */
    --color-red-bg:     #fef3f2;
    --color-red-700:    #b42318;

    /* Warm surfaces */
    --color-surface-warm:     #f6f1e6;
    --color-surface-card:     rgba(255, 252, 246, 0.90);
    --color-surface-card-88:  rgba(255, 252, 246, 0.88);
    --color-white-92:         rgba(255, 255, 255, 0.92);
    --color-white-86:         rgba(255, 255, 255, 0.86);
    --color-white-75:         rgba(255, 255, 255, 0.75);
    --color-off-white:        #fff8ef;

    /* Warm borders */
    --color-border-warm:      rgba(174, 116, 26, 0.18);
    --color-border-subtle:    rgba(110, 118, 134, 0.20);
    --color-border-muted:     rgba(110, 118, 134, 0.25);

    /* Page background gradient */
    --gradient-page-bg:
        radial-gradient(circle at top left,  rgba(242, 198, 125, 0.28), transparent 32%),
        radial-gradient(circle at top right, rgba(95,  163, 139, 0.18), transparent 28%),
        linear-gradient(180deg, #fbf8f1 0%, var(--color-surface-warm) 100%);

    /* Dark mode raw */
    --color-dark-surface:     rgba(17, 24, 39, 0.90);
    --color-dark-border:      rgba(255, 255, 255, 0.10);
    --color-dark-surface-row: rgba(255, 255, 255, 0.04);
    --color-dark-text:        #ffffff;
    --color-dark-text-muted:  var(--color-gray-400);
    --color-dark-amber-text:  #fde68a;
    --color-dark-amber-bg:    rgba(245, 158, 11, 0.10);
    --color-dark-amber-border:rgba(245, 158, 11, 0.30);
    --color-dark-green-bg:    rgba(16, 185, 129, 0.12);
    --color-dark-green-text:  var(--color-green-200);
    --color-dark-green-border:rgba(16, 185, 129, 0.35);
    --color-dark-neutral-bg:  rgba(255, 255, 255, 0.06);
    --color-dark-neutral-text:var(--color-gray-300);
}

/* =============================================================================
   УРОВЕНЬ 2 — SEMANTIC TOKENS
   Используются в компонентах. Переопределяются в dark mode.
   ============================================================================= */

:root {
    /* Text */
    --color-text-default:     var(--color-gray-900);
    --color-text-body:        var(--color-gray-700);
    --color-text-muted:       var(--color-gray-500);
    --color-text-subtle:      var(--color-gray-400);

    /* Brand */
    --color-brand-primary:    var(--color-amber-800);   /* #c86c1a */
    --color-brand-dark:       var(--color-amber-900);   /* #8f4b16 */
    --color-brand-buyer:      var(--color-amber-700);   /* #b45309 */
    --color-brand-supplier:   var(--color-green-800);   /* #127c5a */

    /* Surfaces */
    --color-surface-page:     var(--color-surface-warm);
    --color-surface-base:     var(--color-surface-card);
    --color-surface-default:  #ffffff;
    --color-surface-subtle:   var(--color-gray-50);

    /* Borders */
    --color-border-default:   var(--color-gray-200);
    --color-border-card:      var(--color-border-warm);
    --color-border-divider:   var(--color-gray-100);

    /* States: success */
    --color-success-bg:       var(--color-green-50);
    --color-success-border:   var(--color-green-300);
    --color-success-text:     var(--color-green-700);

    /* States: warning */
    --color-warning-bg:       var(--color-amber-50);
    --color-warning-border:   var(--color-amber-300);
    --color-warning-text:     #92400e;

    /* States: danger */
    --color-danger-bg:        var(--color-red-bg);
    --color-danger-border:    rgba(180, 35, 24, 0.25);
    --color-danger-text:      var(--color-red-700);
}

/* Dark mode semantic overrides */
.dark {
    --color-text-default:     var(--color-dark-text);
    --color-text-body:        var(--color-gray-300);
    --color-text-muted:       var(--color-dark-text-muted);
    --color-surface-default:  var(--color-dark-surface);
    --color-border-default:   var(--color-dark-border);
    --color-border-divider:   var(--color-dark-border);
    --color-surface-subtle:   var(--color-dark-surface-row);

    --color-warning-bg:       var(--color-dark-amber-bg);
    --color-warning-border:   var(--color-dark-amber-border);
    --color-warning-text:     var(--color-dark-amber-text);

    --color-success-bg:       var(--color-dark-green-bg);
    --color-success-border:   var(--color-dark-green-border);
    --color-success-text:     var(--color-dark-green-text);
}

/* =============================================================================
   УРОВЕНЬ 3 — PRIMITIVE TOKENS
   Spacing, radius, shadow, motion, typography, layout.
   ============================================================================= */

:root {
    /* --- Spacing scale (base 4px) --- */
    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.50rem;   /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1.00rem;   /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.50rem;   /* 24px */
    --space-7:   1.75rem;   /* 28px */
    --space-8:   2.00rem;   /* 32px */
    --space-10:  2.50rem;   /* 40px */
    --space-12:  3.00rem;   /* 48px */
    --space-14:  3.50rem;   /* 56px */
    --space-18:  4.50rem;   /* 72px */

    /* --- Border radius --- */
    --radius-sm:   0.50rem;   /*  8px — мелкие inline элементы */
    --radius-md:   0.75rem;   /* 12px — inputs, мелкие карточки */
    --radius-lg:   1.00rem;   /* 16px — кнопки, формы, таблицы */
    --radius-xl:   1.125rem;  /* 18px — stats, medium cards */
    --radius-2xl:  1.50rem;   /* 24px — основные карточки Filament */
    --radius-3xl:  1.75rem;   /* 28px — landing-type карточки */
    --radius-pill: 999px;     /* pill — теги, статусы, badges */

    /* --- Shadows --- */
    --shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-md:   0 10px 30px rgba(15, 23, 42, 0.06);
    --shadow-lg:   0 20px 60px rgba(57, 39, 12, 0.08);   /* тёплая, landing */
    --shadow-success: 0 10px 30px rgba(34, 197, 94, 0.08);
    --shadow-warning: 0 10px 30px rgba(245, 158, 11, 0.10);

    /* --- Motion --- */
    --duration-fast:    0.15s;
    --duration-normal:  0.16s;
    --duration-slow:    0.75s;
    --easing-default:   ease;

    /* --- Typography --- */
    --font-family:  ui-sans-serif, system-ui, sans-serif;

    --font-size-xs:   0.72rem;   /* 11.5px — uppercase table labels */
    --font-size-sm:   0.82rem;   /* 13px   — captions, notes */
    --font-size-base: 0.90rem;   /* 14.4px — secondary body */
    --font-size-md:   0.95rem;   /* 15.2px — primary body */
    --font-size-lg:   1.00rem;   /* 16px   — card titles (small) */
    --font-size-xl:   1.125rem;  /* 18px   — section headings */
    --font-size-2xl:  1.25rem;   /* 20px   — supplier/chef titles */
    --font-size-3xl:  2.00rem;   /* 32px   — page titles */

    --font-weight-regular:  400;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:    1;
    --line-height-snug:     1.1;
    --line-height-normal:   1.2;
    --line-height-relaxed:  1.6;

    --letter-spacing-tight:   -0.04em;
    --letter-spacing-wide:     0.12em;
    --letter-spacing-wider:    0.16em;
    --letter-spacing-widest:   0.18em;

    /* --- Layout --- */
    --shell-narrow:  min(760px,  calc(100% - 32px));
    --shell-wide:    min(1120px, calc(100% - 40px));
    --bp-lg:         1024px;   /* единый breakpoint для 2-col сеток */
}

/* Отключить анимации при prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast:   0s;
        --duration-normal: 0s;
        --duration-slow:   0s;
    }
}

/* =============================================================================
   PURCHASE SESSION COMPONENT TOKENS
   Компонентный уровень — ссылается на semantic/primitive токены выше.
   ============================================================================= */

:root {
    --ps-row-input-bg:       var(--color-white-92);
    --ps-row-input-text:     var(--color-gray-800);
    --ps-row-input-border:   #d6c9a6;
    --ps-row-input-radius:   var(--radius-md);
    --ps-row-input-shadow:   var(--shadow-xs);
    --ps-active-cell-bg:     var(--color-amber-50);
    --ps-active-cell-stripe: var(--color-amber-400);
    --ps-quantity-width:     6.5rem;
    --ps-comment-width:      16rem;
}