/* app/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;
  --accent-color-2: #85de81;
  --text-color-dark: #333;
  --text-color-white: #fff;

  /* Kerho (logged-in identity) */
  --kerho-color-main: #2bb3c0;
  --kerho-color: #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-bg: linear-gradient(
    135deg,
    var(--kerho-color-start),
    var(--kerho-color-mid),
    var(--kerho-color-end)
  );
  --input-text-color: var(--kerho-color-main);
  --input-focus-color: #8ac6d1;
  --input-focus-shadow: 0 0 10px 1px var(--input-focus-color);

  /* App palette */
  --app-color-1: #2E7D32;
  --app-color-2: #3a4f85;
  --app-color-3: #ff8c42;
  --app-color-4: #8AC6FD;

  /* App backgrounds */
  --kalevala-bg: linear-gradient(135deg, #253a65, #444);
  --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-active: linear-gradient(135deg, var(--aurora-blue), var(--aurora-teal));
  --tarinatuokiot-color: #1f3c88;

  /* Aurora */
  --aurora-blue: #1f3c88;
  --aurora-teal: #2bb3c0;
  --aurora-green: #6fe3c1;
  --aurora-blue-dark: #0b1c2d;
  --aurora-teal-dark: #0f3d3e;
  --aurora-green-dark: #1f6f5c;
  --aurora-accent: #7fffd4;
  --aurora-text: #e6f7f2;
  --aurora-muted: #9fbfb7;

  /* Seasons */
  --season-winter: linear-gradient(135deg, #1e90ff, #00bfff);
  --season-spring: linear-gradient(135deg, #32cd32, #90ee90);
  --season-autumn: linear-gradient(135deg, #8b4513, #d2691e);
  --season-summer: linear-gradient(135deg, #ff8c00, #ffd700);
}