/* ============================================
   AGRO2BUSINESS DESIGN SYSTEM
   Colors & Typography Tokens
   Revised — faithful to agro2business.com source
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;900&family=Open+Sans:wght@400;500;600;700;800&family=Roboto:wght@400;500;700;900&family=PT+Sans:wght@400;700&display=swap');

:root {
  /* ─── BRAND COLORS (from site source) ─── */
  --color-primary:          #17a354;   /* green-background — topbar, nav, footer bar, .ui.header.green */
  --color-primary-hover:    #128A45;
  --color-primary-active:   #0E7138;

  --color-green:            #21BA45;   /* Semantic UI green — buttons, headers, labels */
  --color-green-hover:      #16AB39;
  --color-green-light:      #A3C293;
  --color-green-lighter:    #D4EDDA;

  /* ─── BLUE ACCENT ─── */
  --color-blue:             #2185D0;   /* Semantic UI blue — "ANUNCIE GRÁTIS", blue-font */
  --color-blue-hover:       #1678C2;
  --color-blue-light:       #54C8FF;
  --color-blue-bg:          #E3F2FD;

  /* ─── CTA ORANGE ─── */
  --color-cta:              #F2711C;   /* Semantic UI orange — CTA buttons */
  --color-cta-hover:        #E8620C;
  --color-cta-active:       #CF590A;
  --color-cta-light:        #FFF4E6;

  /* ─── DARK BACKGROUNDS ─── */
  --color-dark:             #1B1C1D;   /* Semantic UI inverted — footer main bg */
  --color-dark-hover:       #27292A;
  --color-dark-olive:       #354334;   /* Custom — nutrition section bg */
  --color-dark-blue:        #0a123e;   /* dark-blue-background — mission sections, .blue-font */

  /* ─── ALERT / FEEDBACK ─── */
  --color-success:          #21BA45;
  --color-success-bg:       #D4EDDA;
  --color-error:            #DB2828;   /* Semantic UI red */
  --color-error-bg:         #FFF6F6;
  --color-info:             #2185D0;
  --color-info-bg:          #E3F2FD;
  --color-warning:          #FBBD08;   /* Semantic UI yellow */
  --color-warning-bg:       #FFFAF3;

  /* ─── NEUTRAL PALETTE ─── */
  --color-white:            #FFFFFF;
  --color-off-white:        #F8F9FA;
  --color-gray-100:         #F1F3F5;
  --color-gray-200:         #E9ECEF;
  --color-gray-300:         #DEE2E6;
  --color-gray-400:         #CED4DA;
  --color-gray-500:         #ADB5BD;
  --color-gray-600:         #6C757D;
  --color-gray-700:         #495057;
  --color-gray-800:         #343A40;
  --color-gray-900:         #212529;
  --color-black:            #1B1C1D;

  /* ─── SEMANTIC BACKGROUNDS ─── */
  --bg-primary:             #FFFFFF;
  --bg-secondary:           #F8F9FA;
  --bg-tertiary:            #F1F3F5;
  --bg-highlight:           #D4EDDA;
  --bg-green:               #17a354;
  --bg-dark:                #1B1C1D;
  --bg-dark-olive:          #354334;
  --bg-dark-blue:           #0a123e;

  /* ─── SEMANTIC TEXT ─── */
  --text-primary:           rgba(0,0,0,0.87);   /* Semantic UI default */
  --text-secondary:         rgba(0,0,0,0.6);
  --text-muted:             rgba(0,0,0,0.4);
  --text-light:             rgba(0,0,0,0.25);
  --text-on-dark:           #FFFFFF;
  --text-on-dark-muted:     rgba(255,255,255,0.7);
  --text-on-dark-faint:     rgba(255,255,255,0.5);
  --text-link:              #2185D0;    /* blue-font */
  --text-link-hover:        #1678C2;
  --text-green:             #21BA45;

  /* ─── BORDERS ─── */
  --border-color:           rgba(34,36,38,0.15);   /* Semantic UI default */
  --border-color-dark:      rgba(34,36,38,0.22);
  --border-color-focus:     #2185D0;

  /* ─── SHADOWS ─── */
  --shadow-sm:              0 1px 2px 0 rgba(34,36,38,0.15);
  --shadow-md:              0 2px 4px 0 rgba(34,36,38,0.12), 0 2px 10px 0 rgba(34,36,38,0.15);
  --shadow-lg:              0 6px 20px 0 rgba(34,36,38,0.13);
  --shadow-card:            0 1px 3px 0 #D4D4D5, 0 0 0 1px #D4D4D5;
  --shadow-card-hover:      0 1px 3px 0 #BCBDBD, 0 0 0 1px #D4D4D5;

  /* ─── RADII (Semantic UI defaults) ─── */
  --radius-sm:              0.21428571rem;   /* ~3px */
  --radius-md:              0.28571429rem;   /* ~4px */
  --radius-lg:              0.5rem;          /* 8px */
  --radius-xl:              0.75rem;         /* 12px */
  --radius-pill:            500rem;
  --radius-circle:          50%;

  /* ─── SPACING SCALE ─── */
  --space-1:                4px;
  --space-2:                8px;
  --space-3:                12px;
  --space-4:                16px;
  --space-5:                24px;
  --space-6:                32px;
  --space-7:                48px;
  --space-8:                64px;
  --space-9:                96px;

  /* ─── TYPOGRAPHY: FAMILIES ─── */
  --font-heading:           'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-body:              'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-secondary:         'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-tertiary:          'PT Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:                'Lato', 'Helvetica Neue', Arial, sans-serif;  /* Semantic UI default */
  --font-mono:              'JetBrains Mono', 'Fira Code', monospace;

  /* ─── TYPOGRAPHY: SIZES ─── */
  --text-xs:                12px;
  --text-sm:                14px;
  --text-base:              16px;
  --text-lg:                18px;
  --text-xl:                20px;
  --text-2xl:               24px;
  --text-3xl:               30px;
  --text-4xl:               36px;
  --text-5xl:               48px;
  --text-6xl:               60px;

  /* ─── TYPOGRAPHY: WEIGHTS ─── */
  --weight-regular:         400;
  --weight-medium:          500;
  --weight-semibold:        600;
  --weight-bold:            700;
  --weight-extrabold:       800;
  --weight-black:           900;

  /* ─── TYPOGRAPHY: LINE HEIGHTS ─── */
  --leading-tight:          1.2;
  --leading-normal:         1.5;
  --leading-relaxed:        1.7;

  /* ─── TYPOGRAPHY: SEMANTIC ─── */
  --h1-size:                var(--text-5xl);
  --h1-weight:              var(--weight-black);
  --h1-family:              var(--font-heading);
  --h1-leading:             var(--leading-tight);

  --h2-size:                var(--text-4xl);
  --h2-weight:              var(--weight-bold);
  --h2-family:              var(--font-heading);
  --h2-leading:             var(--leading-tight);

  --h3-size:                var(--text-3xl);
  --h3-weight:              var(--weight-bold);
  --h3-family:              var(--font-heading);
  --h3-leading:             var(--leading-tight);

  --h4-size:                var(--text-2xl);
  --h4-weight:              var(--weight-bold);
  --h4-family:              var(--font-heading);
  --h4-leading:             var(--leading-tight);

  --h5-size:                var(--text-xl);
  --h5-weight:              var(--weight-bold);
  --h5-family:              var(--font-heading);
  --h5-leading:             var(--leading-normal);

  --h6-size:                var(--text-lg);
  --h6-weight:              var(--weight-bold);
  --h6-family:              var(--font-heading);
  --h6-leading:             var(--leading-normal);

  --body-size:              var(--text-base);
  --body-weight:            var(--weight-regular);
  --body-family:            var(--font-body);
  --body-leading:           var(--leading-relaxed);

  --small-size:             var(--text-sm);
  --caption-size:           var(--text-xs);

  /* ─── TRANSITIONS ─── */
  --transition-fast:        0.15s ease;
  --transition-base:        0.2s ease;
  --transition-slow:        0.3s ease;

  /* ─── Z-INDEX SCALE ─── */
  --z-dropdown:             1000;
  --z-sticky:               1020;
  --z-fixed:                1030;
  --z-modal-backdrop:       1040;
  --z-modal:                1050;
  --z-tooltip:              1070;

  /* ─── LAYOUT ─── */
  --container-max:          1127px;   /* Semantic UI container */
  --container-narrow:       800px;
  --header-height:          auto;
  --footer-min-height:      400px;
}

/* ─── BASE RESET ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── HEADING STYLES ─── */
h1, .h1 {
  font-family: var(--h1-family);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-leading);
  color: var(--text-primary);
}

h2, .h2 {
  font-family: var(--h2-family);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-leading);
  color: var(--text-primary);
}

h3, .h3 {
  font-family: var(--h3-family);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-leading);
  color: var(--text-primary);
}

h4, .h4 {
  font-family: var(--h4-family);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-leading);
  color: var(--text-primary);
}

h5, .h5 {
  font-family: var(--h5-family);
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  line-height: var(--h5-leading);
  color: var(--text-primary);
}

h6, .h6 {
  font-family: var(--h6-family);
  font-size: var(--h6-size);
  font-weight: var(--h6-weight);
  line-height: var(--h6-leading);
  color: var(--text-primary);
}

/* ─── LINK STYLES ─── */
a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

/* ─── SELECTION ─── */
::selection {
  background-color: var(--color-green-lighter);
  color: var(--color-dark);
}