/* ================================================================
   GISTMILINAIJA PRO — variables.css
   Design Tokens | Light Mode (default) + Dark Mode
   ================================================================ */

/* ----------------------------------------------------------------
   LIGHT MODE — Default
   ---------------------------------------------------------------- */
:root {
  /* Brand */
  --gmn-green:       #1A7A3C;
  --gmn-green-mid:   #22963F;
  --gmn-green-light: #2BB54E;
  --gmn-green-pale:  #EBF7EF;
  --gmn-green-glow:  rgba(34,150,63,0.10);

  /* Backgrounds */
  --bg-base:      #FFFFFF;
  --bg-surface:   #F6FAF7;
  --bg-elevated:  #FFFFFF;
  --bg-sunken:    #EEF4F0;

  /* Text */
  --text-primary:   #0D1A12;
  --text-secondary: #3A4A40;
  --text-muted:     #6B7E72;
  --text-faint:     #9FB0A6;
  --text-inverted:  #FFFFFF;

  /* Borders */
  --border-light: #DDE8E1;
  --border-mid:   #C4D5CA;
  --border-heavy: #A0B8AA;

  /* Surfaces */
  --surface-card:    #FFFFFF;
  --surface-hover:   #F0F8F2;
  --surface-active:  #E6F4EA;

  /* Header */
  --header-bg:      #FFFFFF;
  --header-border:  #DDE8E1;
  --header-shadow:  0 1px 8px rgba(13,26,18,0.07);

  /* Nav */
  --nav-bg:         #FFFFFF;
  --nav-link:       #3A4A40;
  --nav-link-hover: #1A7A3C;
  --nav-drop-bg:    #FFFFFF;

  /* Ticker */
  --ticker-bg:      #0D1A12;
  --ticker-label-bg:#1A7A3C;
  --ticker-text:    rgba(255,255,255,0.75);

  /* Catbar */
  --catbar-bg:      #FFFFFF;
  --catbar-border:  #DDE8E1;

  /* Hero */
  --hero-bg:        #0D1A12;

  /* Footer */
  --footer-bg:      #0D1A12;
  --footer-surface: #111E15;
  --footer-text:    rgba(255,255,255,0.55);
  --footer-muted:   rgba(255,255,255,0.30);
  --footer-border:  rgba(255,255,255,0.07);

  /* Shadows */
  --shadow-xs:   0 1px 4px rgba(13,26,18,0.06);
  --shadow-sm:   0 2px 8px rgba(13,26,18,0.08);
  --shadow-md:   0 4px 20px rgba(13,26,18,0.10);
  --shadow-lg:   0 8px 36px rgba(13,26,18,0.13);
  --shadow-card: 0 2px 10px rgba(13,26,18,0.07);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-cond:    'Barlow Condensed', 'Arial Narrow', sans-serif;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;

  /* Radius */
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-full: 9999px;

  /* Transitions */
  --t:      0.20s ease;
  --t-slow: 0.38s ease;
}

/* ----------------------------------------------------------------
   DARK MODE — applied via body.dark-mode
   ---------------------------------------------------------------- */
body.dark-mode {
  --bg-base:      #0B1410;
  --bg-surface:   #101C15;
  --bg-elevated:  #162019;
  --bg-sunken:    #0D1912;

  --text-primary:   #E8F0EA;
  --text-secondary: #B8C9BE;
  --text-muted:     #7A9282;
  --text-faint:     #4A6254;
  --text-inverted:  #0D1A12;

  --border-light: rgba(255,255,255,0.07);
  --border-mid:   rgba(255,255,255,0.11);
  --border-heavy: rgba(255,255,255,0.18);

  --surface-card:    #162019;
  --surface-hover:   #1C2A20;
  --surface-active:  #1E3024;

  --header-bg:      #101C15;
  --header-border:  rgba(255,255,255,0.07);
  --header-shadow:  0 1px 12px rgba(0,0,0,0.35);

  --nav-bg:         #101C15;
  --nav-link:       #B8C9BE;
  --nav-link-hover: #2BB54E;
  --nav-drop-bg:    #162019;

  --catbar-bg:      #101C15;
  --catbar-border:  rgba(255,255,255,0.07);

  --shadow-xs:   0 1px 4px rgba(0,0,0,0.25);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.30);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.40);
  --shadow-lg:   0 8px 36px rgba(0,0,0,0.50);
  --shadow-card: 0 2px 10px rgba(0,0,0,0.28);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
  transition: background-color var(--t-slow), color var(--t-slow);
}

a {
  color: var(--gmn-green);
  text-decoration: none;
  transition: color var(--t);
}
a:hover { color: var(--gmn-green-light); }

img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }
input, textarea { font-family: var(--font-body); }

/* ----------------------------------------------------------------
   UTILITIES
   ---------------------------------------------------------------- */
.gmn-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 600px) {
  .gmn-container { padding: 0 16px; }
}

.gmn-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Reading progress */
.gmn-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gmn-green), var(--gmn-green-light));
  width: 0;
  z-index: 9999;
  transition: width 0.08s linear;
  pointer-events: none;
}