/*
Theme Name: GeneratePress Child
Theme URI: https://massagearmyspa.com/
Description: Child Theme for GeneratePress
Author: Arrmandwijanuar
Author URI: https://massagearmyspa.com/
Template: generatepress
Version: 3.0.0 - MODULAR CSS
*/

/* ======================
   IMPORT
   ====================== */
@import url("../generatepress/style.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* ======================
   VARIABLES
   ====================== */
:root {
    /* === MAS Brand Colors === */
    --mas-orange:        #FF7F00;
    --mas-orange-bright: #FE5900;
    --mas-orange-dark:   #BF5000;
    --mas-orange-bg:     #FFDEAA;
    --mas-orange-soft:   #F5ECDB;

    --mas-blue:          #0080FF;
    --mas-blue-bright:   #005BFE;
    --mas-blue-dark:     #1A4DB3;
    --mas-blue-bg:       #AACEFF;
    --mas-blue-soft:     #DBE9F5;

    /* === Legacy aliases === */
    --army-blue:         var(--mas-blue);
    --army-orange:       var(--mas-orange);
    --white-milk:        var(--mas-orange-soft);
    --army-accent:       var(--mas-blue-bright);
    --text-dark:         #222;
    --text-muted:        #1A4DB3;
    --success-green:     var(--mas-orange);
    --danger-red:        var(--mas-orange-bright);

    /* === Tokens === */
    --border-radius-sm:  8px;
    --border-radius-md:  12px;
    --border-radius-lg:  16px;
    --border-radius-xl:  20px;
    --transition-base:   all 0.3s ease;
    --shadow-sm:         0 2px 8px rgba(0,74,173,0.08);
    --shadow-md:         0 4px 12px rgba(0,74,173,0.10);
    --shadow-lg:         0 8px 24px rgba(0,74,173,0.12);
    --shadow-hover:      0 12px 32px rgba(0,74,173,0.15);
}

/* ======================
   BASE STYLES
   ====================== */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #222;
    background-color: #fff;
}

a {
    color: var(--mas-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--mas-orange);
    text-decoration: underline;
}

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

button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--mas-orange);
    outline-offset: 2px;
}