/* ==========================================================================
   Copernicus Land Monitoring Service (CLMS) — Color Schema
   Extracted from: land.copernicus.eu portal
   Date: 2026-03-13
   ========================================================================== */

:root {

  /* -----------------------------------------------------------------------
     PRIMARY BRAND COLORS
     The distinctive CLMS olive-green, used across headings, links,
     buttons, icons, and accent bars.
     ----------------------------------------------------------------------- */
  --clms-primary:            #8FAE1B;   /* Main olive-green                  */
  --clms-primary-dark:       #6E8A0A;   /* Hover / pressed states            */
  --clms-primary-light:      #A8C834;   /* Lighter tint for highlights       */
  --clms-primary-muted:      #C5D96E;   /* Soft backgrounds, tag fills       */
  --clms-primary-pale:       #EFF5D3;   /* Very light wash for panels        */

  /* -----------------------------------------------------------------------
     NAVIGATION / HEADER
     Dark strip at the very top of the page.
     ----------------------------------------------------------------------- */
  --clms-nav-bg:             #3E4A1A;   /* Dark olive nav background         */
  --clms-nav-text:           #FFFFFF;   /* Nav link text                     */
  --clms-nav-hover:          #8FAE1B;   /* Nav link hover highlight          */

  /* -----------------------------------------------------------------------
     HERO / BANNER OVERLAY
     Semi-transparent panel over the forest hero image.
     ----------------------------------------------------------------------- */
  --clms-hero-overlay-bg:    rgba(62, 74, 26, 0.82);  /* Dark olive overlay */
  --clms-hero-title:         #FFFFFF;   /* Hero heading text                 */
  --clms-hero-body:          #E8EADF;   /* Hero paragraph text               */

  /* -----------------------------------------------------------------------
     ANNOUNCEMENT BAR
     Horizontal strip (e.g. "General Assembly — POSTPONED").
     ----------------------------------------------------------------------- */
  --clms-announce-bg:        #8FAE1B;   /* Olive-green background            */
  --clms-announce-text:      #FFFFFF;   /* White text on bar                 */

  /* -----------------------------------------------------------------------
     SURFACE & BACKGROUND
     Page-level neutrals.
     ----------------------------------------------------------------------- */
  --clms-bg-page:            #FFFFFF;   /* Main page background              */
  --clms-bg-section:         #F5F6F0;   /* Alternating section background    */
  --clms-bg-card:            #FFFFFF;   /* Card / panel background           */
  --clms-bg-footer:          #2E3618;   /* Dark footer background            */

  /* -----------------------------------------------------------------------
     TEXT
     ----------------------------------------------------------------------- */
  --clms-text-primary:       #333333;   /* Body text                         */
  --clms-text-secondary:     #5A5A5A;   /* Descriptions, captions            */
  --clms-text-heading:       #8FAE1B;   /* Section headings (olive-green)    */
  --clms-text-inverse:       #FFFFFF;   /* Text on dark backgrounds          */
  --clms-text-link:          #8FAE1B;   /* Link color                        */
  --clms-text-link-hover:    #6E8A0A;   /* Link hover                        */

  /* -----------------------------------------------------------------------
     BUTTONS
     ----------------------------------------------------------------------- */
  --clms-btn-primary-bg:     #8FAE1B;
  --clms-btn-primary-text:   #FFFFFF;
  --clms-btn-primary-hover:  #6E8A0A;
  --clms-btn-outline-border: #8FAE1B;
  --clms-btn-outline-text:   #8FAE1B;
  --clms-btn-outline-hover-bg: #8FAE1B;
  --clms-btn-outline-hover-text: #FFFFFF;

  /* -----------------------------------------------------------------------
     ICONS & DECORATIVE ELEMENTS
     The thin olive-green line icons used in the product category grid.
     ----------------------------------------------------------------------- */
  --clms-icon-stroke:        #8FAE1B;
  --clms-icon-fill:          none;
  --clms-icon-stroke-width:  1.5px;

  /* -----------------------------------------------------------------------
     BORDERS & DIVIDERS
     ----------------------------------------------------------------------- */
  --clms-border-light:       #DDE3C4;   /* Subtle olive-tinted borders       */
  --clms-border-medium:      #B3BD8A;   /* Medium emphasis borders           */
  --clms-divider:            #E5E7D8;   /* Section dividers                  */

  /* -----------------------------------------------------------------------
     SHADOWS
     ----------------------------------------------------------------------- */
  --clms-shadow-sm:          0 1px 3px rgba(62, 74, 26, 0.08);
  --clms-shadow-md:          0 4px 12px rgba(62, 74, 26, 0.12);
  --clms-shadow-lg:          0 8px 24px rgba(62, 74, 26, 0.16);

  /* -----------------------------------------------------------------------
     COPERNICUS EU-BLUE ACCENT
     Used sparingly (EU flag, Copernicus wordmark).
     ----------------------------------------------------------------------- */
  --clms-eu-blue:            #003399;
  --clms-eu-gold:            #FFCC00;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY (reference values)
     ----------------------------------------------------------------------- */
  --clms-font-family:        "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --clms-font-size-base:     16px;
  --clms-line-height-base:   1.6;
  --clms-font-weight-normal: 400;
  --clms-font-weight-semi:   600;
  --clms-font-weight-bold:   700;

  /* -----------------------------------------------------------------------
     SPACING SCALE (consistent rhythm)
     ----------------------------------------------------------------------- */
  --clms-space-xs:           4px;
  --clms-space-sm:           8px;
  --clms-space-md:           16px;
  --clms-space-lg:           24px;
  --clms-space-xl:           40px;
  --clms-space-2xl:          64px;

  /* -----------------------------------------------------------------------
     BORDER RADIUS
     ----------------------------------------------------------------------- */
  --clms-radius-sm:          4px;
  --clms-radius-md:          8px;
  --clms-radius-lg:          16px;
  --clms-radius-pill:        999px;
}


/* ==========================================================================
   UTILITY CLASSES (optional — remove if you only need the variables)
   ========================================================================== */

.clms-bg-primary   { background-color: var(--clms-primary); color: var(--clms-text-inverse); }
.clms-bg-section   { background-color: var(--clms-bg-section); }
.clms-text-primary { color: var(--clms-text-primary); }
.clms-text-heading { color: var(--clms-text-heading); }
.clms-text-link    { color: var(--clms-text-link); }
.clms-text-link:hover { color: var(--clms-text-link-hover); }

.clms-btn {
  display: inline-block;
  padding: var(--clms-space-sm) var(--clms-space-lg);
  font-family: var(--clms-font-family);
  font-weight: var(--clms-font-weight-semi);
  font-size: var(--clms-font-size-base);
  border-radius: var(--clms-radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

.clms-btn--primary {
  background-color: var(--clms-btn-primary-bg);
  color: var(--clms-btn-primary-text);
  border: none;
}
.clms-btn--primary:hover {
  background-color: var(--clms-btn-primary-hover);
}

.clms-btn--outline {
  background-color: transparent;
  color: var(--clms-btn-outline-text);
  border: 2px solid var(--clms-btn-outline-border);
}
.clms-btn--outline:hover {
  background-color: var(--clms-btn-outline-hover-bg);
  color: var(--clms-btn-outline-hover-text);
}