/* =========================================================
   WELCOME OVEN — DESIGN TOKENS
   File: variables.css
   Purpose: Global design system variables
   ========================================================= */


/* =========================================================
   1. BRAND COLORS
   ========================================================= */

:root {

    /* Primary Brand Color
       Engineering, Trust, Technology */
    --color-primary: #0F4C81;

    /* Primary Color Variations */
    --color-primary-dark: #0A355A;
    --color-primary-light: #2F6FA3;

    /* Secondary Brand Color
       Heat, Energy, Industrial Action */
    --color-secondary: #F58220;

    /* Secondary Color Variations */
    --color-secondary-dark: #D9680D;
    --color-secondary-light: #FF9A4A;


    /* =====================================================
       2. NEUTRAL COLORS
       ===================================================== */

    /* Main Background */
    --color-white: #FFFFFF;

    /* Alternate Section Background */
    --color-light-grey: #F5F7FA;

    /* Borders and Dividers */
    --color-border: #D9DEE5;

    /* Main Body Text */
    --color-dark-grey: #3E4651;

    /* Strong Text / Headings */
    --color-black: #1A1A1A;


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

    /* Heading Font */
    --font-heading: "Poppins", sans-serif;

    /* Body Font */
    --font-body: "Inter", sans-serif;


    /* =====================================================
       4. FONT WEIGHTS
       ===================================================== */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /* =====================================================
       5. TYPOGRAPHY SCALE
       Desktop Base Values
       ===================================================== */

    --font-size-hero: 60px;

    --font-size-h1: 48px;
    --font-size-h2: 40px;
    --font-size-h3: 32px;
    --font-size-h4: 24px;
    --font-size-h5: 20px;

    --font-size-body: 18px;
    --font-size-small: 16px;


    /* =====================================================
       6. LINE HEIGHTS
       ===================================================== */

    --line-height-heading: 1.2;
    --line-height-body: 1.6;
    --line-height-small: 1.5;


    /* =====================================================
       7. LAYOUT
       ===================================================== */

    /* Maximum Content Width */
    --container-width: 1200px;

    /* Horizontal Padding */
    --container-padding: 20px;


    /* =====================================================
       8. SECTION SPACING
       ===================================================== */

    /* Desktop */
    --section-spacing-desktop: 100px;

    /* Tablet */
    --section-spacing-tablet: 80px;

    /* Mobile */
    --section-spacing-mobile: 60px;


    /* =====================================================
       9. BORDER RADIUS
       ===================================================== */

    /* Buttons */
    --radius-button: 8px;

    /* Cards */
    --radius-card: 12px;

    /* Images */
    --radius-image: 16px;


    /* =====================================================
       10. SHADOWS
       ===================================================== */

    /* Subtle Card Shadow */
    --shadow-card:
        0 4px 20px rgba(15, 76, 129, 0.08);

    /* Hover Elevation */
    --shadow-card-hover:
        0 12px 30px rgba(15, 76, 129, 0.14);

    /* Header Shadow */
    --shadow-header:
        0 2px 12px rgba(0, 0, 0, 0.08);


    /* =====================================================
       11. TRANSITIONS
       ===================================================== */

    --transition-fast: 200ms ease;

    --transition-normal: 300ms ease;

    --transition-slow: 500ms ease;


    /* =====================================================
       12. BUTTON SIZES
       ===================================================== */

    --button-padding-y: 18px;
    --button-padding-x: 32px;


    /* =====================================================
       13. Z-INDEX SYSTEM
       ===================================================== */

    --z-header: 1000;

    --z-dropdown: 1100;

    --z-modal: 1200;

    --z-whatsapp: 1300;


    /* =====================================================
       14. RESPONSIVE BREAKPOINTS
       ===================================================== */

    /* Mobile: 360px – 767px */
    --breakpoint-mobile: 767px;

    /* Tablet: 768px – 1023px */
    --breakpoint-tablet: 1023px;

    /* Laptop: 1024px – 1439px */
    --breakpoint-laptop: 1439px;

    /* Desktop: 1440px+ */
    --breakpoint-desktop: 1440px;

}