/*!
Theme Name: Hello Elementor Child
Theme URI: https://prismadigital.pro
Author: Prisma Digital
Author URI: https://prismadigital.pro
Description: Child theme for Hello Elementor with Global Design Tokens.
Template: hello-elementor
Version: 1.1.0
*/

/* ==========================================================================
   MASTER DESIGN SYSTEM: GLOBAL TOKENS (:root)
   ========================================================================== */

   :root {
    /* 1. SPACING SCALE (Rule of 4px) */
    --sp-0: 0px;
    --sp-4: 4px;   --sp-8: 8px;   --sp-12: 12px;  --sp-16: 16px;
    --sp-20: 20px; --sp-24: 24px; --sp-32: 32px;  --sp-40: 40px;
    --sp-48: 48px; --sp-64: 64px; --sp-80: 80px;  --sp-96: 96px;
    --sp-120: 120px;

    /* 2. BORDER RADIUS SYSTEM */
    --br-none: 0px;
    --br-xs: 2px;
    --br-s: 4px;      /* Inputs & Checkboxes */
    --br-m: 8px;      /* Buttons & Cards */
    --br-l: 16px;     /* Containers */
    --br-xl: 24px;    /* Decorative */
    --br-full: 9999px; /* Pill-style */

    /* 3. SHADOW TOKENS (Depth System) */
    --shadow-s: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-m: 0 10px 20px rgba(0,0,0,0.1);
    --shadow-l: 0 15px 30px rgba(0,0,0,0.15);

    /* 4. GLOBAL ANIMATION (Standard Transition) */
    --transition-main: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ==========================================================================
   MASTER DESIGN SYSTEM: SPACING & PADDING
   ========================================================================== */

/* GLOBAL SAFE ZONE (Side Padding) */
[class*="section-p-"] > .e-con-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* VERTICAL RHYTHM (Top & Bottom Padding) */
.section-p-0 > .e-con-inner   { padding-top: var(--sp-0) !important; padding-bottom: var(--sp-0) !important; }
.section-p-4 > .e-con-inner   { padding-top: var(--sp-4) !important; padding-bottom: var(--sp-4) !important; }
.section-p-8 > .e-con-inner   { padding-top: var(--sp-8) !important; padding-bottom: var(--sp-8) !important; }
.section-p-12 > .e-con-inner  { padding-top: var(--sp-12) !important; padding-bottom: var(--sp-12) !important; }
.section-p-20 > .e-con-inner  { padding-top: var(--sp-20) !important; padding-bottom: var(--sp-20) !important; }
.section-p-24 > .e-con-inner  { padding-top: var(--sp-24) !important; padding-bottom: var(--sp-24) !important; }
.section-p-32 > .e-con-inner  { padding-top: var(--sp-32) !important; padding-bottom: var(--sp-32) !important; }
.section-p-40 > .e-con-inner  { padding-top: var(--sp-40) !important; padding-bottom: var(--sp-40) !important; }
.section-p-48 > .e-con-inner  { padding-top: var(--sp-48) !important; padding-bottom: var(--sp-48) !important; }
.section-p-64 > .e-con-inner  { padding-top: var(--sp-64) !important; padding-bottom: var(--sp-64) !important; }
.section-p-80 > .e-con-inner  { padding-top: var(--sp-80) !important; padding-bottom: var(--sp-80) !important; }
.section-p-96 > .e-con-inner  { padding-top: var(--sp-96) !important; padding-bottom: var(--sp-96) !important; }
.section-p-120 > .e-con-inner { padding-top: var(--sp-120) !important; padding-bottom: var(--sp-120) !important; }

/* ==========================================================================
   MASTER DESIGN SYSTEM: RADIUS UTILITIES
   ========================================================================== */

.br-none { border-radius: var(--br-none) !important; }
.br-xs   { border-radius: var(--br-xs) !important; overflow: hidden; }
.br-s    { border-radius: var(--br-s) !important; overflow: hidden; }
.br-m    { border-radius: var(--br-m) !important; overflow: hidden; }
.br-l    { border-radius: var(--br-l) !important; overflow: hidden; }
.br-xl   { border-radius: var(--br-xl) !important; overflow: hidden; }
.br-full { border-radius: var(--br-full) !important; overflow: hidden; }

/* ==========================================================================
   RESPONSIVE LOGIC
   ========================================================================== */
@media (max-width: 767px) {
    :root {
        --sp-120: 60px;
        --sp-96: 48px;
        --sp-80: 40px;
        --sp-64: 32px;
    }
}

/* ==========================================================================
   MASTER DESIGN SYSTEM: FORM ELEMENTS (Linked to Global Tokens)
   ========================================================================== */

/* Universal selector for all types of text fields and drop-down menus */
.sys-form input[type="text"], 
.sys-form input[type="email"], 
.sys-form input[type="tel"], 
.sys-form textarea, 
.sys-form select {
    width: 100% !important;
    font-size: 16px !important;
    
    /* BACKGROUND: Using P 10 (Light Blue/Tint) from your JSON */
    background-color: var(--e-global-color-p10) !important;
    
    /* BORDER: Using G 20 (Light Neutral Gray) from your JSON */
    border: 1px solid var(--e-global-color-g20) !important;
    
    /* TEXT: Using your Base Text color (#1A1A1A) */
    color: var(--e-global-color-text) !important;
    
    /* TOKENS FROM THE BACKBONE */
    padding: var(--sp-12) var(--sp-16) !important; 
    border-radius: var(--br-s) !important; 
    transition: var(--transition-main) !important;
}

/* FOCUS STATE: Interaction Logic */
.sys-form input:focus, 
.sys-form textarea:focus, 
.sys-form select:focus {
    outline: none !important;
    background-color: #ffffff !important; /* Pure white on active entry */
    border-color: var(--e-global-color-primary) !important;
    
    /* Subtle glow using Primary color */
    box-shadow: 0 0 0 3px rgba(27, 54, 93, 0.1) !important;
}

/* Specific to textarea (comments/messages) */
.sys-form textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* PLACEHOLDER STYLE: Using G 40 for neutral readability */
.sys-form ::placeholder {
    color: var(--e-global-color-g40) !important;
    opacity: 1;
}