/* =========================================================
   MRPSN Design Tokens
   Single visual language for the child theme and widgets.
   ========================================================= */

:root {
    /* Brand */
    --mrpsn-blue: #006fff;
    --mrpsn-blue-dark: #0059d6;
    --mrpsn-blue-soft: #eef6ff;
    --mrpsn-blue-rgb: 0, 111, 255;

    /* Semantic */
    --mrpsn-sale: #fe9031;
    --mrpsn-sale-dark: #df741b;
    --mrpsn-sale-soft: #fff5eb;
    --mrpsn-sale-rgb: 254, 144, 49;
    --mrpsn-success: #168a55;
    --mrpsn-danger: #d83a4a;
    --mrpsn-warning: #a86513;

    /* Text */
    --mrpsn-ink: #111827;
    --mrpsn-text: #263244;
    --mrpsn-text-soft: #475569;
    --mrpsn-muted: #6b7280;
    --mrpsn-disabled: #9ca3af;

    /* Surfaces */
    --mrpsn-bg: #ffffff;
    --mrpsn-surface: #ffffff;
    --mrpsn-surface-soft: #f8faff;
    --mrpsn-soft: #f5f7fa;
    --mrpsn-page: #ffffff;

    /* Borders */
    --mrpsn-line: rgba(15, 23, 42, 0.08);
    --mrpsn-line-strong: rgba(15, 23, 42, 0.14);
    --mrpsn-line-blue: rgba(var(--mrpsn-blue-rgb), 0.22);

    /* Layout */
    --mrpsn-container-wide: 1360px;
    --mrpsn-container: 1180px;
    --mrpsn-container-reading: 950px;
    --mrpsn-gutter: 24px;
    --mrpsn-gutter-tablet: 16px;
    --mrpsn-gutter-mobile: 12px;
    --mrpsn-section-space: 48px;
    --mrpsn-section-space-mobile: 32px;

    /* Spacing */
    --mrpsn-space-1: 4px;
    --mrpsn-space-2: 8px;
    --mrpsn-space-3: 12px;
    --mrpsn-space-4: 16px;
    --mrpsn-space-5: 20px;
    --mrpsn-space-6: 24px;
    --mrpsn-space-7: 32px;
    --mrpsn-space-8: 40px;
    --mrpsn-space-9: 48px;

    /* Radius */
    --mrpsn-radius-xs: 8px;
    --mrpsn-radius-sm: 12px;
    --mrpsn-radius-md: 16px;
    --mrpsn-radius-lg: 22px;
    --mrpsn-radius-xl: 28px;
    --mrpsn-radius-pill: 999px;

    /* Controls */
    --mrpsn-control-sm: 36px;
    --mrpsn-control-md: 42px;
    --mrpsn-control-lg: 50px;

    /* Typography */
    --mrpsn-font-xs: 11px;
    --mrpsn-font-sm: 12px;
    --mrpsn-font-md: 14px;
    --mrpsn-font-lg: 16px;
    --mrpsn-font-title: clamp(18px, 2vw, 24px);
    --mrpsn-weight-regular: 400;
    --mrpsn-weight-medium: 600;
    --mrpsn-weight-bold: 700;
    --mrpsn-weight-heavy: 800;

    /* Shadows intentionally disabled by design. */
    --mrpsn-shadow-sm: none;
    --mrpsn-shadow-md: none;
    --mrpsn-shadow-lg: none;
    --mrpsn-shadow-card: none;
    --mrpsn-shadow-section: none;

    /* Focus */
    --mrpsn-focus-ring: 0 0 0 3px rgba(var(--mrpsn-blue-rgb), 0.18);

    /* Icons */
    --mrpsn-icon-sm: 16px;
    --mrpsn-icon-md: 20px;
    --mrpsn-icon-lg: 24px;

    /* Motion */
    --mrpsn-dur-fast: 0.16s;
    --mrpsn-dur-base: 0.22s;
    --mrpsn-dur-slow: 0.35s;
    --mrpsn-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --mrpsn-ease-bounce: cubic-bezier(0.22, 1, 0.36, 1);
    --mrpsn-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layers */
    --mrpsn-z-header: 1000;
    --mrpsn-z-overlay: 1100;
    --mrpsn-z-modal: 1200;
}

@media (max-width: 1024px) {
    :root {
        --mrpsn-gutter: var(--mrpsn-gutter-tablet);
    }
}

@media (max-width: 767px) {
    :root {
        --mrpsn-gutter: var(--mrpsn-gutter-mobile);
    }
}