/* pro.con 3 design tokens ----------------------------------------------------
   Single source for neutral colors, typography, elevation and component scale.
   Component files should consume these variables instead of redefining basics. */
:root {
    --pc-bg: #f5f7fb;
    --pc-surface: #ffffff;
    --pc-surface-soft: #f8fafc;
    --pc-surface-muted: #f1f5f9;
    --pc-border: #dce3ee;
    --pc-border-soft: #e2e8f0;
    --pc-border-subtle: var(--pc-border);
    --pc-border-strong: #cbd5e1;
    --pc-text: #172033;
    --pc-text-strong: #0f172a;
    --pc-muted: #6b7280;
    --pc-text-muted: var(--pc-muted);
    --procon-muted: var(--pc-muted);
    --pc-muted-strong: #64748b;

    --pc-primary: #2563eb;
    --pc-primary-dark: #1d4ed8;
    --pc-primary-soft: #eff6ff;
    --pc-primary-border: #bfdbfe;
    --pc-shop-primary: var(--pc-theme-primary, var(--pc-primary));
    --pc-secondary-bg: #ffffff;
    --pc-secondary-bg-hover: #f8fafc;
    --pc-secondary-text: #334155;
    --pc-secondary-text-hover: #0f172a;
    --pc-danger: #991b1b;
    --pc-danger-bg: #b91c1c;
    --pc-danger-bg-hover: #991b1b;
    --pc-danger-soft: #fef2f2;
    --pc-danger-border: #fecaca;
    --pc-success: #166534;
    --pc-success-rgb: 34, 197, 94;
    --pc-success-soft: #f0fdf4;
    --pc-success-border: #bbf7d0;
    --pc-warning: #92400e;
    --pc-warning-soft: #fffbeb;
    --pc-warning-border: #fde68a;

    --pc-radius: 14px;
    --pc-radius-sm: 10px;
    --pc-radius-lg: 18px;
    --pc-radius-xl: 22px;
    --pc-button-radius: 9px;
    --pc-button-height: 36px;
    --pc-button-height-sm: 30px;
    --pc-button-primary-bg: var(--pc-primary, #2563eb);
    --pc-button-primary-bg-hover: var(--pc-primary-dark, #1d4ed8);
    --pc-button-primary-border: var(--pc-primary, #2563eb);
    --pc-button-primary-border-hover: var(--pc-primary-dark, #1d4ed8);
    --pc-button-primary-text: #ffffff;
    --pc-button-secondary-bg: var(--pc-secondary-bg, #ffffff);
    --pc-button-secondary-bg-hover: var(--pc-secondary-bg-hover, #f8fafc);
    --pc-button-secondary-border: var(--pc-border, #dce3ee);
    --pc-button-secondary-border-hover: var(--pc-border-strong, #cbd5e1);
    --pc-button-secondary-text: var(--pc-secondary-text, #334155);
    --pc-button-secondary-text-hover: var(--pc-secondary-text-hover, #172033);
    --pc-button-danger-bg: var(--pc-danger-bg, #b91c1c);
    --pc-button-danger-bg-hover: var(--pc-danger-bg-hover, #991b1b);
    --pc-button-danger-border: var(--pc-danger-bg, #b91c1c);
    --pc-button-danger-border-hover: var(--pc-danger-bg-hover, #991b1b);
    --pc-button-danger-text: #ffffff;
    --pc-button-disabled-bg: #f8fafc;
    --pc-button-disabled-border: var(--pc-border, #dce3ee);
    --pc-button-disabled-text: var(--pc-muted, #64748b);
    --pc-control-radius: 12px;
    --pc-control-height: 44px;
    --pc-control-bg: #ffffff;
    --pc-control-bg-hover: #fbfdff;
    --pc-control-bg-disabled: #f1f5f9;
    --pc-control-border: #cfd8e5;
    --pc-control-border-hover: #b6c4d6;
    --pc-control-border-focus: var(--pc-primary, #2563eb);
    --pc-control-text: var(--pc-text, #172033);
    --pc-control-placeholder: #94a3b8;
    --pc-control-shadow-focus: 0 0 0 4px rgba(37, 99, 235, 0.13);
    --pc-control-outline-error: rgba(220, 38, 38, 0.18);
    --pc-select-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.75 7.75L10 12.25L14.25 7.75' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --pc-layout-gap: 22px;
    --pc-layout-gap-lg: 28px;
    --pc-card-radius: 22px;
    --pc-card-bg: var(--pc-surface, #ffffff);
    --pc-card-bg-soft: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    --pc-card-bg-accent: linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #eef6ff 100%);
    --pc-card-border: #e2e8f0;
    --pc-card-border-soft: rgba(226, 232, 240, 0.92);
    --pc-card-shadow: 0 18px 45px rgba(15, 23, 42, 0.075);
    --pc-card-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.055);
    --pc-modal-backdrop: rgba(15, 23, 42, 0.48);
    --pc-modal-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
    --pc-card-header-bg: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    --pc-card-header-border: #edf2f7;
    --pc-subcard-bg: #f8fafc;
    --pc-subcard-border: #e2e8f0;
    --pc-sticky-bg: rgba(255, 255, 255, 0.92);
    --pc-sticky-border: var(--pc-card-border-soft, #e2e8f0);
    --pc-sticky-shadow: 0 16px 38px rgba(15, 23, 42, 0.11);
    --pc-table-head-bg: linear-gradient(180deg, #eef5ff 0%, #e8f1ff 100%);
    --pc-table-head-border: #c7d9f1;

    --dt-surface: #ffffff;
    --dt-surface-soft: #f8fafc;
    --dt-surface-tint: #f1f5f9;
    --dt-border: #e2e8f0;
    --dt-border-strong: #cbd5e1;
    --dt-text: #0f172a;
    --dt-muted: #64748b;
    --dt-row-bg: #ffffff;
    --dt-row-bg-alt: #f8fafc;
    --dt-row-hover-bg: #eef6ff;
    --dt-sort-icon-muted: #c4ceda;
    --dt-tooltip-bg: #0f172a;
    --dt-tooltip-border: rgba(148, 163, 184, 0.32);
    --dt-tooltip-text: #f8fafc;
    --dt-primary: #2563eb;
    --dt-primary-dark: #1d4ed8;
    --dt-primary-soft: #eff6ff;
    --dt-head-bg: var(--pc-theme-primary, #2563eb);
    --dt-head-border: var(--pc-theme-primary, #2563eb);
    --dt-head-divider: rgba(255, 255, 255, 0.22);
    --dt-head-text: #ffffff;
    --dt-success: #16a34a;
    --dt-success-soft: #ecfdf5;
    --dt-warning-soft: #fffbeb;
    --dt-pagination-bg: #ffffff;
    --dt-pagination-bg-hover: rgba(var(--pc-theme-primary-rgb, 37, 99, 235), 0.10);
    --dt-pagination-bg-current: var(--pc-theme-primary, #2563eb);
    --dt-pagination-bg-disabled: #f8fafc;
    --dt-pagination-border: rgba(var(--pc-theme-primary-rgb, 37, 99, 235), 0.20);
    --dt-pagination-border-hover: var(--pc-theme-primary, #2563eb);
    --dt-pagination-border-current: var(--pc-theme-primary, #2563eb);
    --dt-pagination-border-disabled: #e2e8f0;
    --dt-pagination-text: #334155;
    --dt-pagination-text-hover: color-mix(in srgb, var(--pc-theme-primary, #2563eb) 74%, #0f172a);
    --dt-pagination-text-current: #ffffff;
    --dt-pagination-text-disabled: #94a3b8;
    --dt-radius-xl: 22px;
    --dt-radius-lg: 16px;
    --dt-radius-md: 12px;
    --dt-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    --dt-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.06);
    --dt-font-regular: var(--pc-font-regular, 400);
    --dt-font-medium: var(--pc-font-medium, 500);
    --dt-font-bold: var(--pc-font-bold, 700);

    --pc-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    --pc-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.06);
    --pc-shadow-card: 0 18px 45px rgba(15, 23, 42, 0.075);
    --pc-focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.16);

    --pc-font-family: "Roboto", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --pc-font-regular: 400;
    --pc-font-medium: 500;
    --pc-font-semibold: 600;
    --pc-font-bold: 700;
    --detail-font-regular: var(--pc-font-regular, 400);
    --detail-font-medium: var(--pc-font-medium, 500);
    --detail-font-bold: var(--pc-font-bold, 700);
    --detail-text: var(--pc-text-strong, #0f172a);
    --detail-muted: var(--pc-muted-strong, #64748b);
    --detail-surface: var(--pc-card-bg, #ffffff);
    --detail-surface-soft: var(--pc-subcard-bg, #f8fafc);
    --detail-surface-muted: var(--pc-surface-muted, #f1f5f9);
    --detail-border: var(--pc-subcard-border, #e2e8f0);
    --detail-border-strong: var(--pc-border-strong, #cbd5e1);
    --detail-primary: var(--pc-theme-primary, var(--pc-primary, #2563eb));
    --detail-primary-dark: var(--pc-theme-primary-dark, var(--pc-primary-dark, #1d4ed8));
    --detail-primary-soft: var(--pc-primary-soft, #eff6ff);
    --detail-primary-border: var(--pc-primary-border, #bfdbfe);
    --detail-success: var(--pc-success, #166534);
    --detail-success-soft: var(--pc-success-soft, #f0fdf4);
    --detail-success-border: var(--pc-success-border, #bbf7d0);
    --detail-warning: var(--pc-warning, #92400e);
    --detail-warning-soft: var(--pc-warning-soft, #fffbeb);
    --detail-warning-border: var(--pc-warning-border, #fde68a);
    --detail-on-primary: var(--pc-button-primary-text, #ffffff);
    --detail-card-bg-soft: var(--pc-card-bg-soft, linear-gradient(180deg, #ffffff 0%, #fbfdff 100%));
    --detail-card-bg-accent: var(--pc-card-bg-accent, linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #eef6ff 100%));
    --detail-card-bg-main:
        radial-gradient(circle at 0% 12%, rgba(var(--pc-theme-primary-rgb, 37, 99, 235), 0.10), transparent 32%),
        radial-gradient(circle at 100% 100%, rgba(var(--pc-theme-primary-rgb, 37, 99, 235), 0.08), transparent 34%),
        var(--detail-card-bg-soft);
    --detail-hero-bg:
        radial-gradient(circle at 12% 20%, rgba(var(--pc-theme-primary-rgb, 37, 99, 235), 0.12), transparent 34%),
        var(--detail-card-bg-accent);
}