/**
 * Pargas Platform — Design Tokens
 * "CLEAN INDUSTRIAL — FOOD GRADE" — single source of truth.
 * Palette aligned to the approved visual benchmark:
 *   deep teal (trust/industry) + warm orange (conversion) + slate neutrals.
 * Every component must consume these variables. No hard-coded brand colors elsewhere.
 */

:root {
        /* ===== Surfaces & Ink (slate) ===== */
        --pg-bg: #F8FAFC;                 /* page background */
        --pg-surface: #FFFFFF;            /* cards, panels */
        --pg-surface-2: #F1F5F9;          /* muted fills, chips, wells */
        --pg-fg: #0F172A;                 /* primary ink */
        --pg-fg-muted: #64748B;           /* secondary text */
        --pg-fg-soft: #94A3B8;            /* meta, captions */
        --pg-border: #E2E8F0;             /* hairlines */
        --pg-border-strong: #CBD5E1;
        --pg-input: #CBD5E1;

        /* ===== Brand — Deep Teal (cool / trust / industry) ===== */
        --pg-primary: #0E7490;
        --pg-primary-strong: #155E75;     /* hover / pressed / gradient start */
        --pg-primary-bright: #06B6D4;     /* gradients, icons on dark */
        --pg-primary-soft: #ECFEFF;       /* tinted backgrounds */
        --pg-primary-softer: #F2FDFF;
        --pg-on-primary: #FFFFFF;
        --pg-ring: #0891B2;

        /* ===== Conversion Accent — Warm Orange (scarce: RFQ & commerce only) ===== */
        --pg-accent: #EA580C;
        --pg-accent-strong: #C2410C;
        --pg-accent-soft: #FFF7ED;
        --pg-accent-ink: #431407;         /* text on orange */
        --pg-accent-bright: #F97316;      /* icons/numbers on dark bands */

        /* ===== Signals ===== */
        --pg-success: #059669;
        --pg-success-soft: #ECFDF5;
        --pg-warning: #D97706;
        --pg-warning-soft: #FFFBEB;
        --pg-danger: #DC2626;
        --pg-danger-soft: #FEF2F2;
        --pg-info: #0891B2;
        --pg-info-soft: #ECFEFF;

        /* ===== Dark Teal Bands ===== */
        --pg-ink: #0B3A47;                /* footer, topbar, dark panels */
        --pg-ink-2: #134E5E;              /* gradient end / elevated dark */
        --pg-ink-3: #1D5D73;              /* borders on dark */
        --pg-on-ink: #FFFFFF;
        --pg-on-ink-muted: rgba(255, 255, 255, 0.72);
        --pg-on-ink-soft: rgba(255, 255, 255, 0.55);
        --pg-on-ink-line: rgba(255, 255, 255, 0.1);

        /* ===== Signature gradients ===== */
        --pg-grad-cool: linear-gradient(135deg, #134E5E 0%, #0E7490 55%, #06B6D4 100%);
        --pg-grad-warm: linear-gradient(135deg, #C2410C 0%, #EA580C 60%, #F97316 100%);
        --pg-grad-hero: radial-gradient(1100px 480px at 88% -10%, rgba(234, 88, 12, 0.16), transparent 60%),
                        radial-gradient(900px 520px at 8% 110%, rgba(34, 211, 238, 0.18), transparent 60%),
                        linear-gradient(135deg, #0B3A47 0%, #0E7490 60%, #0A5C74 100%);

        /* ===== Typography ===== */
        --pg-font: "Vazirmatn", "Vazirmatn RD", Tahoma, Arial, sans-serif;
        --pg-fs-display: clamp(1.7rem, 1.15rem + 2.3vw, 2.65rem);
        --pg-fs-h2: clamp(1.25rem, 1.05rem + 0.9vw, 1.55rem);
        --pg-fs-h3: 1rem;
        --pg-fs-body: 0.9375rem;
        --pg-fs-small: 0.8125rem;
        --pg-fs-meta: 0.71875rem;
        --pg-lh: 1.95;

        /* ===== Spacing rhythm ===== */
        --pg-space-1: 4px;  --pg-space-2: 8px;  --pg-space-3: 12px;
        --pg-space-4: 16px; --pg-space-5: 20px; --pg-space-6: 24px;
        --pg-space-7: 28px; --pg-space-8: 32px; --pg-space-9: 40px;
        --pg-space-10: 48px; --pg-space-11: 56px; --pg-space-12: 64px;
        --pg-section-gap: var(--pg-space-11);       /* section rhythm */
        --pg-section-pad: var(--pg-space-12);

        /* ===== Layout ===== */
        --pg-container: 1280px;
        --pg-gutter: var(--pg-space-4);
        --pg-header-topbar-h: 38px;
        --pg-header-main-h: 68px;
        --pg-header-cat-h: 50px;
        --pg-header-sticky-top: 152px;

        /* ===== Radius ===== */
        --pg-radius-sm: 8px;
        --pg-radius: 12px;
        --pg-radius-lg: 16px;
        --pg-radius-xl: 22px;
        --pg-round: 999px;

        /* ===== Shadows — depth without weight ===== */
        --pg-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -8px rgba(15, 23, 42, 0.1);
        --pg-shadow-pop: 0 12px 40px -12px rgba(14, 116, 144, 0.25);
        --pg-shadow-btn: 0 5px 14px -5px rgba(14, 116, 144, 0.45);
        --pg-shadow-btn-accent: 0 5px 14px -5px rgba(234, 88, 12, 0.45);

        /* ===== Motion ===== */
        --pg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
        --pg-dur: 0.25s;
        --pg-dur-slow: 0.45s;

        /* ===== Z-index scale ===== */
        --pg-z-header: 50;
        --pg-z-mega: 60;
        --pg-z-drawer: 80;
        --pg-z-modal: 90;
        --pg-z-toast: 100;
        --pg-z-sticky-bar: 55;
}

@media (min-width: 768px) {
        :root {
                --pg-gutter: var(--pg-space-6);
                --pg-header-main-h: 74px;
        }
}