/* =========================================================
   ECOPARROT — CINEMATIC DESIGN SYSTEM
   Inspired by the visual language of the reference video
   ========================================================= */

:root {

    /* ==========================================
       BRAND COLORS
    ========================================== */

    --primary: #14532D;
    --primary-light: #1F7D53;
    --primary-dark: #0F3D22;

    --secondary: #84CC16;
    --accent: #D4AF37;


    /* ==========================================
       BACKGROUNDS
    ========================================== */

    /* Main website background — LIGHT */
    --bg-main: #F7F9F4;

    /* White sections */
    --bg-light: #FFFFFF;

    /* Dark sections */
    --bg-dark: #10241B;

    /* Optional dark surface */
    --bg-dark-soft: #0B1711;


    /* ==========================================
       TEXT
    ========================================== */

    --text-dark: #1E1E1E;
    --text-light: #6B7280;

    --text-white: #FFFFFF;


    /* ==========================================
       BORDERS
    ========================================== */

    --border-color: #E5E7EB;
    --border-dark: rgba(255,255,255,.10);
    --border-green: rgba(20,83,45,.25);


    /* ==========================================
       GLASS
    ========================================== */

    --glass-bg: rgba(255,255,255,.15);
    --glass-bg-strong: rgba(255,255,255,.22);

    --glass-border: rgba(255,255,255,.25);

    --blur: blur(20px);


    /* ==========================================
       GRADIENTS
    ========================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #14532D,
            #1F7D53
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #10241B,
            #0B1711
        );

    --gradient-hero:
        linear-gradient(
            rgba(10,25,15,.55),
            rgba(10,25,15,.65)
        );

    --gradient-glow:
        radial-gradient(
            circle at center,
            rgba(31,125,83,.12),
            transparent 65%
        );


    /* ==========================================
       TYPOGRAPHY
    ========================================== */

    --heading-font: "Poppins", sans-serif;
    --body-font: "Inter", sans-serif;

    --fs-display: clamp(58px, 8vw, 128px);

    --fs-h1: clamp(48px, 6vw, 96px);

    --fs-h2: clamp(40px, 5vw, 76px);

    --fs-h3: clamp(24px, 3vw, 42px);

    --fs-h4: 24px;

    --fs-body: 17px;

    --fs-small: 13px;


    /* ==========================================
       FONT WEIGHTS
    ========================================== */

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;


    /* ==========================================
       RADIUS
    ========================================== */

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-xl: 40px;
    --radius-xxl: 56px;


    /* ==========================================
       SHADOWS
    ========================================== */

    --shadow-sm:
        0 10px 30px rgba(0,0,0,.08);

    --shadow-md:
        0 20px 60px rgba(0,0,0,.12);

    --shadow-lg:
        0 35px 100px rgba(0,0,0,.15);

    --shadow-green:
        0 0 45px rgba(24,200,120,.18);


    /* ==========================================
       SPACING
    ========================================== */

    --section-padding: 140px;
    --container-width: 1280px;


    /* ==========================================
       TRANSITIONS
    ========================================== */

    --transition-fast: .25s ease;

    --transition:
        .45s cubic-bezier(
            .22,
            1,
            .36,
            1
        );

    --transition-slow:
        .8s cubic-bezier(
            .22,
            1,
            .36,
            1
        );
}