/*
Theme Name:  DecodeMyVIN Custom
Theme URI:
Author:
Author URI:
Description: A lightweight, high-performance custom WordPress theme built specifically for VIN decoding. Optimized for trust, speed, and conversions.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: decodemyvin
Tags:        utility, vin-decoder, lightweight, custom
*/

/* ==========================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {
    /* --- Brand Colors --- */
    --color-primary:        #0a192f;   /* Deep Navy Blue  — headers, trust elements */
    --color-primary-light:  #112240;   /* Slightly lighter navy for secondary surfaces */
    --color-cta:            #f97316;   /* Vibrant Orange  — primary CTA buttons */
    --color-cta-hover:      #ea580c;   /* Deeper orange for hover / active states */
    --color-accent:         #fbbf24;   /* Amber yellow   — badges, highlights */

    /* --- Backgrounds & Surfaces --- */
    --color-bg-base:        #ffffff;   /* Crisp white page background */
    --color-bg-surface:     #f8fafc;   /* Off-white for offset content sections */
    --color-bg-dark:        #0a192f;   /* Dark sections (hero, footer) */

    /* --- Typography Colors --- */
    --color-text-main:      #1e293b;   /* Slate 800 — body text, high readability */
    --color-text-muted:     #64748b;   /* Slate 500 — captions, secondary text */
    --color-text-inverse:   #f1f5f9;   /* Light text on dark backgrounds */

    /* --- Borders --- */
    --color-border:         #e2e8f0;   /* Slate 200 — dividers, input borders */
    --color-border-focus:   #f97316;   /* Orange border on :focus */

    /* --- Status / Semantic Colors --- */
    --color-success:        #22c55e;   /* Green — valid indicator */
    --color-error:          #ef4444;   /* Red — error state */
    --color-warning:        #f59e0b;   /* Amber — warning */

    /* --- Typography --- */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* --- Type Scale --- */
    --text-xs:   0.75rem;    /*  12px */
    --text-sm:   0.875rem;   /*  14px */
    --text-base: 1rem;       /*  16px */
    --text-lg:   1.125rem;   /*  18px */
    --text-xl:   1.25rem;    /*  20px */
    --text-2xl:  1.5rem;     /*  24px */
    --text-3xl:  1.875rem;   /*  30px */
    --text-4xl:  2.25rem;    /*  36px */
    --text-5xl:  3rem;       /*  48px */

    /* --- Font Weights --- */
    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;

    /* --- Line Heights --- */
    --leading-tight:  1.25;
    --leading-snug:   1.375;
    --leading-normal: 1.5;
    --leading-relaxed:1.625;

    /* --- Spacing Scale --- */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* --- Layout --- */
    --container-max:   1200px;
    --container-pad:   clamp(1rem, 5vw, 2rem);

    /* --- Border Radius --- */
    --radius-sm:  0.25rem;
    --radius-md:  0.5rem;
    --radius-lg:  0.75rem;
    --radius-xl:  1rem;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-cta: 0 4px 20px rgba(249, 115, 22, 0.4);

    /* --- Transitions --- */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
}


/* ==========================================================================
   2. MODERN CSS RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 100%; /* Respect user browser font size preferences */
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:              var(--font-sans);
    font-size:                var(--text-base);
    font-weight:              var(--font-normal);
    line-height:              var(--leading-normal);
    color:                    var(--color-text-main);
    background-color:         var(--color-bg-base);
    -webkit-font-smoothing:   antialiased;
    -moz-osx-font-smoothing:  grayscale;
    text-rendering:           optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

a {
    color: var(--color-cta);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-cta-hover);
}

ul, ol {
    list-style: none;
}

/* ==========================================================================
   3. BASE TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight:  var(--font-bold);
    line-height:  var(--leading-tight);
    color:        var(--color-primary);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl);  }
h6 { font-size: var(--text-lg);  }

p {
    margin-bottom: var(--space-4);
    line-height: var(--leading-relaxed);
}

p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* ==========================================================================
   5. COMPONENT: BUTTONS
   ========================================================================== */

.btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              var(--space-2);
    padding:          var(--space-3) var(--space-8);
    font-size:        var(--text-base);
    font-weight:      var(--font-semibold);
    line-height:      1;
    border:           2px solid transparent;
    border-radius:    var(--radius-md);
    cursor:           pointer;
    text-decoration:  none;
    transition:       background-color var(--transition-base),
                      color var(--transition-base),
                      border-color var(--transition-base),
                      box-shadow var(--transition-base),
                      transform var(--transition-fast);
    white-space:      nowrap;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

/* Primary CTA Button — Orange */
.btn-primary {
    background-color: var(--color-cta);
    color:            #ffffff;
    box-shadow:       var(--shadow-cta);
}

.btn-primary:hover {
    background-color: var(--color-cta-hover);
    color:            #ffffff;
    box-shadow:       0 6px 24px rgba(249, 115, 22, 0.5);
}

/* Secondary Button — Navy Outline */
.btn-secondary {
    background-color: transparent;
    color:            var(--color-primary);
    border-color:     var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color:            #ffffff;
}

/* Ghost (light) — for use on dark backgrounds */
.btn-ghost {
    background-color: rgba(255, 255, 255, 0.1);
    color:            #ffffff;
    border-color:     rgba(255, 255, 255, 0.3);
}

.btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color:            #ffffff;
}

/* Button Sizes */
.btn-lg {
    padding:    var(--space-4) var(--space-10);
    font-size:  var(--text-lg);
}

.btn-sm {
    padding:    var(--space-2) var(--space-4);
    font-size:  var(--text-sm);
}