/* ═══════════════════════════════════════════════════════════
   VARIÁVEIS CSS & RESET GLOBAL
   COMSAF - Sistema de Design
═══════════════════════════════════════════════════════════ */

:root {
    /* ── Paleta de Verdes ── */
    --green-950: #0a2e0f;
    --green-900: #1b5e20;
    --green-800: #2e7d32;
    --green-700: #388e3c;
    --green-600: #43a047;
    --green-500: #4caf50;
    --green-400: #66bb6a;
    --green-300: #81c784;
    --green-200: #a5d6a7;
    --green-100: #c8e6c9;
    --green-50:  #e8f5e9;
    --green-25:  #f1f8f2;

    /* ── Cores de Acento e Destaque ── */
    --accent:       var(--green-600);
    --accent-dark:  var(--green-800);
    --accent-light: var(--green-400);

    /* ── Cores Neutras ── */
    --white:     #ffffff;
    --off-white: #fafbfa;
    --gray-50:   #f8f9fa;
    --gray-100:  #f1f3f2;
    --gray-200:  #e9eceb;
    --gray-300:  #dee2e0;
    --gray-400:  #ced4d1;
    --gray-500:  #adb5b1;
    --gray-600:  #6c7571;
    --gray-700:  #495652;
    --gray-800:  #343a37;
    --gray-900:  #212524;
    --black:     #0d1210;

    /* ── Cores Textuais ── */
    --text-primary:   #1a2820;
    --text-secondary: #4a5e54;
    --text-muted:     #7a8e84;
    --text-light:     rgba(255, 255, 255, 0.92);
    --text-light-muted: rgba(255, 255, 255, 0.70);

    /* ── Backgrounds ── */
    --bg-page:     #fafbfa;
    --bg-section:  #f4f8f5;
    --bg-card:     #ffffff;
    --bg-dark:     #132118;
    --bg-darker:   #0d1a12;

    /* ── Gradientes ── */
    --gradient-primary:    linear-gradient(135deg, var(--green-800) 0%, var(--green-600) 50%, var(--green-500) 100%);
    --gradient-dark:       linear-gradient(135deg, var(--green-950) 0%, var(--green-900) 60%, var(--green-800) 100%);
    --gradient-hero:       linear-gradient(160deg, rgba(27,94,32,0.92) 0%, rgba(46,125,50,0.78) 50%, rgba(67,160,71,0.65) 100%);
    --gradient-cta:        linear-gradient(135deg, #1b5e20 0%, #2e7d32 40%, #388e3c 70%, #43a047 100%);
    --gradient-card-hover: linear-gradient(135deg, var(--green-700), var(--green-500));
    --gradient-footer:     linear-gradient(180deg, #132118 0%, #0d1a12 100%);

    /* ── Sombras ── */
    --shadow-xs:  0 1px 3px rgba(0, 50, 20, 0.08);
    --shadow-sm:  0 2px 8px rgba(0, 50, 20, 0.10);
    --shadow-md:  0 4px 20px rgba(0, 50, 20, 0.12);
    --shadow-lg:  0 8px 40px rgba(0, 50, 20, 0.16);
    --shadow-xl:  0 16px 60px rgba(0, 50, 20, 0.20);
    --shadow-2xl: 0 24px 80px rgba(0, 50, 20, 0.25);
    --shadow-inset: inset 0 2px 4px rgba(0, 50, 20, 0.06);
    --shadow-green: 0 8px 32px rgba(67, 160, 71, 0.30);

    /* ── Tipografia ── */
    --font-primary:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif:     'Merriweather', Georgia, 'Times New Roman', serif;
    --font-mono:      'Courier New', Courier, monospace;

    --fs-xs:   0.75rem;    /* 12px */
    --fs-sm:   0.875rem;   /* 14px */
    --fs-base: 1rem;       /* 16px */
    --fs-md:   1.125rem;   /* 18px */
    --fs-lg:   1.25rem;    /* 20px */
    --fs-xl:   1.5rem;     /* 24px */
    --fs-2xl:  1.875rem;   /* 30px */
    --fs-3xl:  2.25rem;    /* 36px */
    --fs-4xl:  3rem;       /* 48px */
    --fs-5xl:  3.75rem;    /* 60px */
    --fs-6xl:  4.5rem;     /* 72px */

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

    --lh-tight:  1.2;
    --lh-snug:   1.35;
    --lh-normal: 1.6;
    --lh-relaxed: 1.75;

    /* ── Espaçamento ── */
    --space-1:  0.25rem;  /* 4px */
    --space-2:  0.5rem;   /* 8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */

    /* ── Layout ── */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1200px;
    --container-2xl: 1440px;

    --section-pad-y: clamp(var(--space-16), 8vw, var(--space-24));
    --section-pad-x: var(--space-6);

    /* ── Bordas ── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   20px;
    --radius-2xl:  32px;
    --radius-full: 9999px;

    --border-width: 1px;
    --border-color: var(--gray-200);
    --border:       1px solid var(--border-color);
    --border-green: 1px solid var(--green-200);

    /* ── Transições ── */
    --ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --duration-fast:   150ms;
    --duration-base:   250ms;
    --duration-slow:   400ms;
    --duration-slower: 600ms;

    --transition-base:    all var(--duration-base) var(--ease-in-out);
    --transition-fast:    all var(--duration-fast) var(--ease-in-out);
    --transition-color:   color var(--duration-base) var(--ease-in-out),
                          background-color var(--duration-base) var(--ease-in-out),
                          border-color var(--duration-base) var(--ease-in-out);
    --transition-transform: transform var(--duration-base) var(--ease-spring);

    /* ── Z-Index ── */
    --z-base:    1;
    --z-sticky:  100;
    --z-header:  200;
    --z-overlay: 300;
    --z-modal:   400;
    --z-toast:   500;
    --z-top:     9999;

    /* ── Header ── */
    --header-topbar-h: 40px;
    --header-main-h:   80px;
    --header-total-h:  calc(var(--header-topbar-h) + var(--header-main-h));

    /* ── Blur ── */
    --blur-sm:  blur(4px);
    --blur-md:  blur(12px);
    --blur-lg:  blur(24px);
    --blur-xl:  blur(40px);
}

/* ═══════════════════════════════════════════════════════════
   RESET MODERNO
═══════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-total-h);
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    hanging-punctuation: first last;
}

body {
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background-color: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button,
input,
select,
textarea {
    font: inherit;
    border: none;
    outline: none;
    background: none;
}

button {
    cursor: pointer;
}

address {
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--text-primary);
}

p {
    line-height: var(--lh-relaxed);
}

/* Focus visível para acessibilidade */
:focus-visible {
    outline: 3px solid var(--green-500);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}