/*
Theme Name: OceanWP Child
Theme URI: https://safebox2u.com.my/
Author: Eddy Wong
Author URI: https://safebox2u.com.my/
Description: A child theme for OceanWP.
Template: oceanwp
Version: 1.0
*/

/* ========================================
   SAFEBOX2U GLOBAL FOUNDATION
   ======================================== */

/* ----------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------- */
:root {
    --color-primary: #3F6A54;
    --color-primary-dark: #2d5a3f;
    --color-primary-darker: #1e4030;
    --color-primary-light: #5a9e6f;
    --color-bg: #f8faf9;
    --color-bg-card: #ffffff;
    --color-bg-subtle: rgba(63, 106, 84, 0.03);
    --color-text: #2c3e50;
    --color-text-dark: #1a1a1a;
    --color-text-body: #3d4f46;
    --color-text-muted: #7a8a80;
    --color-text-light: #495057;
    --color-text-white: #f9f9f9;
    --color-accent: #FFD700;
    --color-accent-hover: #ffcc00;
    --color-accent-text: #1a1a1a;
    --color-border: #e8ede9;
    --color-border-dark: rgba(63, 106, 84, 0.3);
    --color-shadow: rgba(63, 106, 84, 0.08);
    --color-whatsapp: #25D366;
    --color-whatsapp-hover: #1fb855;
    --color-star: #f5a623;
    --font-heading: 'Montserrat', Arial, sans-serif;
    --font-body: 'Inter', Arial, sans-serif;
    --radius-small: 6px;
    --radius-button: 8px;
    --radius-card: 12px;
}

/* ----------------------------------------
   2. BASE TYPOGRAPHY
   ---------------------------------------- */
body {
    color: var(--color-text-body);
    font-family: var(--font-body);
    font-size: 15.5px;
    line-height: 1.65;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.woocommerce-loop-product__title,
.woocommerce div.product .product_title {
    color: var(--color-text-dark);
    font-family: var(--font-heading);
    letter-spacing: 0;
}

a {
    color: var(--color-primary);
    transition: color 0.2s ease;
}

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

/* ----------------------------------------
   3. ACCESSIBILITY & UI DEFAULTS
   ---------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
    outline: 3px solid rgba(63, 106, 84, 0.28);
    outline-offset: 3px;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    border-radius: var(--radius-button);
    font-family: var(--font-body);
    font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
    border-color: var(--color-border);
    border-radius: var(--radius-button);
    color: var(--color-text);
    font-family: var(--font-body);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(63, 106, 84, 0.1);
}

::selection {
    background: var(--color-primary);
    color: var(--color-text-white);
}