/*
Theme Name: WiderMatrix
Theme URI: https://widermatrix.com/
Author: WiderMatrix Team
Author URI: https://widermatrix.com/
Description: A modern, performance-optimized WordPress theme for smart vending machine and unmanned retail businesses. Built with Core Web Vitals in mind.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: widermatrix
Tags: business, brand, responsive, modern, vending, one-column, custom-menu
*/

/* ---------- CSS Variables ---------- */
:root {
    /* Brand Colors: #883E74 primary purple */
    --brand-primary: #883E74;
    --brand-primary-dark: #6c2f5b;
    --brand-primary-light: #a8568f;
    --brand-accent: #d4a373;
    --brand-gradient: linear-gradient(135deg, #883E74 0%, #a8568f 100%);

    /* Neutrals */
    --color-bg: #ffffff;
    --color-bg-soft: #faf6f9;
    --color-bg-dark: #1f1320;
    --color-border: #ece2ea;
    --color-text: #2a1b27;
    --color-text-muted: #6a5a66;
    --color-text-inverse: #ffffff;

    /* Layout */
    --container-width: 1280px;
    --container-padding: 24px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 4px 14px rgba(136, 62, 116, 0.08);
    --shadow-md: 0 10px 30px rgba(136, 62, 116, 0.12);
    --shadow-lg: 0 20px 60px rgba(136, 62, 116, 0.18);

    /* Typography - system font stack, no external font requests */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.7;

    /* Motion */
    --transition: 0.3s ease;
    --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    /* Breakpoints (reference only, used in media queries) */
    --bp-mobile: 768px;
    --bp-tablet: 1024px;
    --bp-desktop: 1280px;
}

/* ---------- Global Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    overflow-x: clip;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--brand-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--brand-primary);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    font-size: 14px;
}
.skip-link:focus {
    top: 0;
    color: #fff;
}