/* variables.css (Reviewed 2026-02-04)*/
:root {
  /* Shared tokens (WP + App) */
  --primary-blue: #253a65;
  --primary-blue-highlight: #3a4f85;
  --primary-color: #253a65;
  --background-color: #253a65;
  --accent-color: #0091a5;
  --blog-color: #85de81;

  /* Typography colors */
  --text-color-dark: #333;
  --text-color-white: #fff;

  /* Alerts */
  --alert-color: #e94b35;
  --alert-color-bg: #fbeae8;

  /* Buttons */
  --button-color-primary: #2bb3c0;

  /* Kerho (logged-in identity) */
  --kerho-color-main: #2bb3c0;
  --kerho-color-start: #1f3c88;
  --kerho-color-mid: #2bb3c0;
  --kerho-color-end: #6fe3c1;
  --kerho-color-link: #6fe3c1;
  --kerho-color-link-hover: var(--accent-color);
  --kerho-color-border: rgba(76, 175, 80, 0.4);
  --kerho-color-dark: #3d8b40;
  --kerho-color-glow: rgba(76, 175, 80, 0.4);
  --kerho-hover-start: #162f66;
  --kerho-hover-mid: #1f8f9a;
  --kerho-hover-end: #4fbfa3;

  /* Form inputs (shared WWW/App) */
  --input-text-color: var(--kerho-color-main);
  --input-focus-color: #8ac6d1;
  --input-focus-shadow: 0 0 10px 1px var(--input-focus-color);

  /* App CTA (WP-side usage) */
  --app-green-color-start: #2E7D32;
  --app-green-color-end: #1f5f25;
  --app-green-text-hover: #43a047;

  /* Content categories */
  --luontojaksot-color-start: #85de81;
  --luontojaksot-color-end: #2E7D32;
  --tarinatuokiot-color-start: #4f6cff;
  --tarinatuokiot-color-end: #3949d6;
  --elokuvat-color-start: #ffcc66;
  --elokuvat-color-end: #ff9900;
  --elokuva-color-1: #f16971;
  --elokuva-color-2: #ff9c51;

  /* App palette (shared) */
  --app-color-1: #2E7D32;
  --app-color-2: #3a4f85;
  --app-color-3: #ff8c42;

  /* Aurora */
  --aurora-blue: #1f3c88;
  --aurora-teal: #2bb3c0;
  --aurora-green: #6fe3c1;
  --aurora-blue-dark: #0b1c2d;
  --aurora-teal-dark: #0f3d3e;
  --aurora-green-dark: #1f6f5c;
  --aurora-text-main: #e6f7f2;
  --aurora-text-accent: #6fe3c1;
  --aurora-text-muted: #9fbfb7;
  --aurora-shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.12);
  --aurora-shadow-strong: 0 10px 35px rgba(0, 0, 0, 0.25);

  /* Backgrounds / gradients */
  --gradient-bg:
    radial-gradient(
      ellipse at center,
      rgba(37, 58, 101, 0.85) 0%,
      rgba(20, 35, 70, 0.8) 40%,
      rgba(5, 10, 20, 0.9) 100%
    ),
    rgba(37, 58, 101, 0.3);
  --gradient-bg-opacity:
    radial-gradient(
      ellipse at center,
      rgba(37, 58, 101, 0.5) 0%,
      rgba(20, 35, 70, 0.5) 40%,
      rgba(5, 10, 20, 0.5) 100%
    ),
    rgba(37, 58, 101, 0.3);
  --gradient-bg-2: linear-gradient(355deg, var(--aurora-blue), var(--primary-blue));
  --gradient-bg-3:
    linear-gradient(
      -30deg,
      rgba(130, 2, 2, 0.4),
      rgba(0, 0, 0, 0.50)
    );
  --gradient-bg-active: linear-gradient(135deg, var(--aurora-blue), var(--aurora-teal));
  --dark-blue-gradient:
    radial-gradient(
      ellipse at center,
      rgba(37, 58, 101, 0.85) 0%,
      rgba(20, 35, 70, 0.8) 40%,
      rgba(5, 10, 20, 0.9) 100%
    ),
    rgba(37, 58, 101, 0.3);
  --dark-opacity-bg: rgba(0, 0, 0, 0.6);

  /* Seasons */
  --season-winter: linear-gradient(135deg, #1e90ff, #00bfff);

  /* Footer */
  --footer-header-color: #1b2b4b;

  /* Header (WWW) */
  --header-color-start: #1c3455;
  --header-color-end: #132845;
  --header-gradient: linear-gradient(160deg, var(--header-color-start), var(--header-color-end));

  /* Top bar (WWW) */
  --top-bar-color-start: #162b46;
  --top-bar-color-end: #0f1f35;
  --top-bar-gradient: linear-gradient(160deg, var(--top-bar-color-start), var(--top-bar-color-end));
}