/* ================================================================
   Global Theme Variables + Component Tokens
   Loaded before design-system.css via @import
   ================================================================ */

:root {
  /* ─── Brand / Global ─── */
  --cp-primary: #0c8ef4;
  --cp-primary-dark: #0c287b;
  --cp-accent: #0c8ef4;
  --cp-bg: #fafafa;
  --cp-card-bg: #ffffff;
  --cp-text: #2b384c;
  --cp-muted: #536174;
  --cp-border: #dce6f2;
  --cp-soft-bg: #f8f9fa;

  /* ─── Typography ─── */
  --font-heading: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:  -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ─── Radius ─── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* ─── Shadows ─── */
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 6px 18px rgba(0,0,0,0.08);
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-xl: 0 18px 40px rgba(0,0,0,0.12);
  --shadow-raised: 0 2px 8px color-mix(in oklab, var(--cp-text), transparent 92%);
  --shadow-ring: 0 0 0 1px var(--cp-border);
  --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--cp-primary), transparent 70%);
  --shadow-none: none;

  /* ─── Layout ─── */
  --button-height: 44px;
  --button-radius: var(--radius-sm);
  --container-width: 1200px;
  --section-padding-y: 80px;
  --card-padding: 16px;
  --card-gap: 16px;

  /* ─── Missing legacy / pagination tokens ─── */
  --cp-gray-2: #f8f9fa;
  --cp-gray-6: #dce6f2;
  --cp-gray-8: #8a9bb2;
  --cp-gray-10: #536174;
  --cp-white: #ffffff;
  --fg-muted: var(--cp-muted);

  /* ─── Overlay / misc ─── */
  --overlay-bg: rgba(0,0,0,0.6);
  --header-inverse-icon-color: color-mix(in oklab, var(--header-inverse-text), transparent 45%);

  /* ─── Component: Header ─── */
  --header-bg: var(--cp-card-bg);
  --header-text: var(--cp-text);
  --header-link-color: var(--cp-text);
  --header-link-hover-color: var(--cp-primary);
  --header-border: 1px solid var(--cp-border);
  --header-shadow: var(--shadow-none);
  --header-input-bg: var(--cp-soft-bg);
  --header-input-border: 1px solid var(--cp-border);
  --header-input-color: var(--cp-text);

  /* Dark header variant (design-3) tokens — overridden by preset or skin */
  --header-inverse-bg: #0C287B;
  --header-inverse-text: #ffffff;
  --header-inverse-link-color: rgba(255,255,255,0.75);
  --header-inverse-link-hover-color: #ffffff;
  --header-inverse-border: 0;
  --header-inverse-shadow: 0 4px 20px rgba(0,0,0,0.15);
  --header-inverse-input-bg: rgba(255,255,255,0.06);
  --header-inverse-input-border: 1px solid rgba(255,255,255,0.12);
  --header-inverse-input-color: #ffffff;

  /* ─── Component: Footer ─── */
  --footer-bg: var(--cp-card-bg);
  --footer-text: var(--cp-text);
  --footer-link-color: var(--cp-text);
  --footer-link-hover-color: var(--cp-primary);
  --footer-border: 1px solid var(--cp-border);
  --footer-muted: var(--cp-muted);
  --footer-heading-color: var(--cp-muted);

  /* Dark footer variant (design-3) tokens */
  --footer-inverse-bg: #0C287B;
  --footer-inverse-text: #ffffff;
  --footer-inverse-link-color: rgba(255,255,255,0.9);
  --footer-inverse-link-hover-color: #ffffff;
  --footer-inverse-border: 0;
  --footer-inverse-muted: rgba(255,255,255,0.5);
  --footer-inverse-heading-color: rgba(255,255,255,0.45);

  /* ─── Component: Hero ─── */
  --hero-bg: var(--cp-card-bg);
  --hero-title-color: var(--cp-text);
  --hero-text-color: var(--cp-muted);
  --hero-card-bg: var(--cp-card-bg);
  --hero-button-bg: var(--cp-primary-dark);
  --hero-button-hover-bg: color-mix(in oklab, var(--cp-primary-dark), black 6%);
  --hero-badge-active-bg: #e8f8ef;
  --hero-badge-active-color: #17a34a;

  /* ─── Component: Sidebar ─── */
  --sidebar-bg: transparent;
  --sidebar-border: 1px solid var(--cp-border);
  --sidebar-title-color: var(--cp-text);
  --sidebar-link-color: var(--cp-text);
  --sidebar-link-hover-color: var(--cp-primary);
  --sidebar-star-color: #eab308;
  --sidebar-accent-border: 3px solid var(--cp-primary);

  /* ─── Component: Coupon Card ─── */
  --coupon-card-bg: var(--cp-card-bg);
  --coupon-card-border: 1px solid var(--cp-border);
  --coupon-card-radius: var(--radius-md);
  --coupon-card-shadow: var(--shadow-none);
  --coupon-title-color: var(--cp-text);
  --coupon-text-color: var(--cp-muted);
  --coupon-button-bg: var(--cp-primary);
  --coupon-button-hover-bg: var(--cp-primary-dark);
  --coupon-button-text: #ffffff;
  --coupon-sale-color: #e11d48;
  --coupon-sale-bg: #fff0f3;
  --coupon-verified-bg: #f0fdf4;
  --coupon-verified-color: var(--cp-primary);
  --coupon-expired-btn-bg: #b8c7da;
  --coupon-expired-text: var(--cp-muted);

  /* ─── Component: Category Card ─── */
  --category-card-bg: var(--cp-card-bg);
  --category-card-border: 1px solid var(--cp-border);
  --category-icon-bg: var(--cp-soft-bg);
  --category-icon-color: var(--cp-primary);

  /* ─── Component: Store Card ─── */
  --store-card-bg: var(--cp-card-bg);
  --store-card-border: 1px solid var(--cp-border);
  --store-logo-bg: var(--cp-card-bg);
  --store-title-color: var(--cp-text);

  /* ─── Component: Stats ─── */
  --stats-card-bg: var(--cp-card-bg);
  --stats-card-border: 1px solid var(--cp-border);
  --stats-number-color: var(--cp-primary);
  --stats-label-color: var(--cp-muted);
}

/* ================================================================
   DEBUG PRESET — theme-debug-contrast
   Очень контрастные значения для проверки покрытия переменных.
   Если элемент не меняет цвет/фон/бордер/тень/радиус — значит
   там остался хардкод.
   ================================================================ */
body.theme-debug-contrast {
  /* Brand / Global — максимально отличные от дефолта */
  --cp-primary: #ff0055;
  --cp-primary-dark: #990033;
  --cp-accent: #00ff88;
  --cp-bg: #1a0b2e;
  --cp-card-bg: #2d1b4e;
  --cp-text: #00ffff;
  --cp-muted: #ffaa00;
  --cp-border: #ff00ff;
  --cp-soft-bg: #3d1b6e;

  /* Radius — маленькие, чтобы было заметно */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;

  /* Shadows — яркие, заметные */
  --shadow-card: 0 4px 12px rgba(255,0,255,0.3);
  --shadow-card-hover: 0 8px 24px rgba(0,255,136,0.4);
  --shadow-xs: 0 1px 4px rgba(255,170,0,0.3);
  --shadow-sm: 0 2px 8px rgba(255,0,255,0.25);
  --shadow-md: 0 4px 16px rgba(0,255,136,0.3);
  --shadow-lg: 0 8px 32px rgba(255,0,85,0.3);
  --shadow-xl: 0 16px 48px rgba(0,255,255,0.25);
  --shadow-raised: 0 4px 12px rgba(255,170,0,0.25);
  --shadow-ring: 0 0 0 2px #ff00ff;
  --shadow-focus: 0 0 0 4px rgba(255,0,85,0.3);
  --shadow-none: 0 0 0 1px #ff0000; /* "none" тоже должен быть заметен */

  /* Component: Header */
  --header-bg: #4a004a;
  --header-text: #00ff00;
  --header-link-color: #ffff00;
  --header-link-hover-color: #ff00ff;
  --header-border: 2px solid #00ffff;
  --header-shadow: 0 4px 12px rgba(255,0,255,0.4);
  --header-input-bg: #2a002a;
  --header-input-border: 2px solid #ffaa00;
  --header-input-color: #00ffff;
  --header-inverse-bg: #ff6600;
  --header-inverse-text: #000000;
  --header-inverse-link-color: #330033;
  --header-inverse-link-hover-color: #ffffff;
  --header-inverse-border: 2px solid #00ff00;
  --header-inverse-shadow: 0 4px 16px rgba(0,0,0,0.5);
  --header-inverse-input-bg: #ffcc00;
  --header-inverse-input-border: 2px solid #000000;
  --header-inverse-input-color: #000000;

  /* Component: Footer */
  --footer-bg: #004a4a;
  --footer-text: #ffcc00;
  --footer-link-color: #00ff88;
  --footer-link-hover-color: #ff0055;
  --footer-border: 2px dashed #ff00ff;
  --footer-muted: #ffaa00;
  --footer-heading-color: #00ffff;
  --footer-inverse-bg: #ff0055;
  --footer-inverse-text: #000000;
  --footer-inverse-link-color: #330000;
  --footer-inverse-link-hover-color: #ffffff;
  --footer-inverse-border: 2px dashed #00ff00;
  --footer-inverse-muted: #660022;
  --footer-inverse-heading-color: #330011;

  /* Component: Hero */
  --hero-bg: #2e004a;
  --hero-title-color: #ff0055;
  --hero-text-color: #00ff88;
  --hero-card-bg: #4a0066;
  --hero-button-bg: #ff6600;
  --hero-button-hover-bg: #cc4400;
  --hero-badge-active-bg: #ff0055;
  --hero-badge-active-color: #ffffff;

  /* Component: Sidebar */
  --sidebar-bg: #4a002a;
  --sidebar-border: 2px solid #00ffff;
  --sidebar-title-color: #ff00ff;
  --sidebar-link-color: #00ff00;
  --sidebar-link-hover-color: #ff0055;
  --sidebar-star-color: #00ffff;
  --sidebar-accent-border: 3px solid #ff00ff;

  /* Component: Coupon Card */
  --coupon-card-bg: #3d003d;
  --coupon-card-border: 2px solid #00ff88;
  --coupon-card-radius: 2px;
  --coupon-card-shadow: 0 4px 12px rgba(255,0,255,0.3);
  --coupon-title-color: #00ffff;
  --coupon-text-color: #ffaa00;
  --coupon-button-bg: #ff0055;
  --coupon-button-hover-bg: #990033;
  --coupon-button-text: #00ff00;
  --coupon-sale-color: #00ffff;
  --coupon-sale-bg: #004a4a;
  --coupon-verified-bg: #004a2a;
  --coupon-verified-color: #00ff88;
  --coupon-expired-btn-bg: #ffaa00;
  --coupon-expired-text: #ff00ff;

  /* Component: Category Card */
  --category-card-bg: #2a004a;
  --category-card-border: 2px solid #ff00ff;
  --category-icon-bg: #4a0066;
  --category-icon-color: #00ff88;

  /* Component: Store Card */
  --store-card-bg: #1a004a;
  --store-card-border: 2px solid #ff0055;
  --store-logo-bg: #3d003d;
  --store-title-color: #00ffff;

  /* Component: Stats */
  --stats-card-bg: #4a1a00;
  --stats-card-border: 2px solid #ffaa00;
  --stats-number-color: #ff0055;
  --stats-label-color: #00ff88;

  /* Overlay / misc */
  --overlay-bg: rgba(255,0,255,0.6);
  --header-inverse-icon-color: color-mix(in oklab, var(--header-inverse-text), transparent 45%);
}