/*
Theme Name: Modeo
Theme URI: https://modeo.pl
Author: Sitefy
Author URI: https://sitefy.pl
Description: Custom WooCommerce theme for Modeo, powered by Sitefy.
Version: 1.0.7
Text Domain: modeo
*/

/* Ensure header stays below mobile overlay and sidebar */
header.site-header,
header {
   position: relative;
   z-index: 10;
   /* lower than overlay (9998) and sidebar (9999) */
}

:root {
   /* ============================================
       MODEO DESIGN SYSTEM - Colors from Next.js
       Exact match with modeo-woocommerce/frontend/src/app/globals.css
       ============================================ */

   /* Core Colors (from Next.js globals.css - EXACT MATCH) */
   --background: #ffffff;
   --foreground: #171717;
   --primary: #cc1616;
   --primary-hover: #b31313;
   --accent: #059669;
   --accent-hover: #047857;
   --neutral: #6b7280;
   --neutral-light: #9ca3af;
   --success: #10b981;
   --warning: #f59e0b;

   /* ============================================
       Gray Scale Colors (for borders, backgrounds, text)
       Matching Tailwind gray scale used in Next.js
       ============================================ */
   --gray-50: #f9fafb;
   --gray-100: #f3f4f6;
   --gray-200: #e5e7eb;
   --gray-300: #d1d5db;
   --gray-400: #9ca3af;
   --gray-500: #6b7280;
   --gray-600: #4b5563;
   --gray-700: #374151;
   --gray-800: #1f2937;
   --gray-900: #111827;

   /* ============================================
       Legacy Colors (for backward compatibility)
       ============================================ */

   /* Primary Colors - Legacy (deprecated, use --primary instead) */
   --modeokids-primary-blue: #1a9df0;
   --modeokids-blue: #1a9df0;
   --modeokids-light-blue-bg: #eef6fe;
   --modeokids-pink-accent: #ff91bb;
   --modeokids-pink: #ff91bb;
   --modeokids-light-pink-bg: #ffeef7;

   /* Additional Colors - Legacy (deprecated) */
   --modeokids-text-primary: #2c3e50;
   --modeokids-text-secondary: #7f8c8d;
   --modeokids-success: #27ae60;
   --modeokids-warning: #f39c12;
   --modeokids-danger: #e74c3c;
   --modeokids-white: #ffffff;
   --modeokids-gray-light: #f8f9fa;
   --modeokids-bg-main: #ffffff;

   /* ============================================
       Typography
       ============================================ */
   --font-heading: 'Poppins', 'Quicksand', sans-serif;
   --font-body: 'Open Sans', 'Lato', sans-serif;

   /* ============================================
       Shadows & Effects
       ============================================ */
   --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.16);

   /* ============================================
       Borders & Radius
       ============================================ */
   --radius-sm: 8px;
   --radius-md: 15px;
   --radius-lg: 25px;
   --radius-full: 50px;
}

body {
   font-family: var(--font-body);
   color: var(--foreground);
   background-color: var(--background);
   margin: 0;
   padding: 0;
   line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-heading);
   font-weight: 700;
   color: var(--foreground);
   margin-bottom: 1rem;
}