/*
Theme Name: VU-TEK Shop
Theme URI: https://eshop.vu-tek.ro
Author: VU-TEK SERVICII SRL
Description: Temă custom WooCommerce pentru eshop.vu-tek.ro. Design tehnic/neutru, albastru cu accent magenta.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: vutek-shop
*/

/* ==========================================================================
   Design tokens - paleta de culori și tipografie
   ========================================================================== */

:root {
    /* Albastru tehnic - culoare primară */
    --vu-blue-900: #0a1f44;
    --vu-blue-700: #123a7a;
    --vu-blue-600: #1450b0;
    --vu-blue-500: #1a63d6;
    --vu-blue-100: #e7f0fd;

    /* Accent din logo */
    --vu-accent: #9e005d;
    --vu-accent-dark: #74003f;

    /* Neutre */
    --vu-gray-900: #12151c;
    --vu-gray-700: #3a3f4b;
    --vu-gray-500: #6b7280;
    --vu-gray-200: #e5e7eb;
    --vu-gray-100: #f5f6f8;
    --vu-white: #ffffff;

    /* Tipografie */
    --vu-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --vu-font-logo: 'Space Grotesk', var(--vu-font-body);

    /* Layout */
    --vu-max-width: 1280px;
    --vu-radius: 8px;
    --vu-shadow: 0 2px 8px rgba(10, 31, 68, 0.08);
    --vu-shadow-hover: 0 6px 20px rgba(10, 31, 68, 0.14);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--vu-font-body);
    color: var(--vu-gray-900);
    background: var(--vu-white);
    line-height: 1.55;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--vu-blue-600); text-decoration: none; }
a:hover { color: var(--vu-blue-700); }

.vu-container {
    max-width: var(--vu-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.vu-btn {
    display: inline-block;
    padding: 12px 24px;
    background: var(--vu-blue-600);
    color: var(--vu-white);
    border: none;
    border-radius: var(--vu-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.vu-btn:hover { background: var(--vu-blue-700); color: var(--vu-white); transform: translateY(-1px); }
.vu-btn--accent { background: var(--vu-accent); }
.vu-btn--accent:hover { background: var(--vu-accent-dark); }

.vu-section { padding: 56px 0; }
.vu-section-title {
    font-family: var(--vu-font-logo);
    font-size: 28px;
    font-weight: 700;
    color: var(--vu-blue-900);
    margin: 0 0 32px;
}