/*
 * Ostoja — Design tokens (single source of truth).
 * Loaded globally by the theme AND mirrored in the Elementor plugin
 * so widgets render correctly even on a non-Ostoja theme.
 * If you change a value here, update plugins/ostoja-elementor/assets/css/tokens.css too.
 */
:root {
  /* Light-only site: opt out of browser/OS automatic dark mode (the theme has
     no dark palette, so forced darkening only distorts the design). */
  color-scheme: only light;

  /* Surfaces */
  --ost-cream: #f3f0e9;
  --ost-background: #f3f0e9;
  --ost-card: #ffffff;
  --ost-popover: #ffffff;
  --ost-sage: #dde8e0;
  --ost-secondary: #dde8e0;
  --ost-muted: #e9e5dc;

  /* Greens */
  --ost-primary: #285943;     /* wealth green */
  --ost-forest: #214b38;      /* forest green */
  --ost-primary-foreground: #f3f0e9;
  --ost-secondary-foreground: #214b38;

  /* Text */
  --ost-foreground: #24352d;
  --ost-muted-foreground: #5c6b62;

  /* Accent */
  --ost-gold: #d4a86a;
  --ost-accent: #d4a86a;

  /* Lines */
  --ost-border: rgba(36, 53, 45, 0.08);
  --ost-input: rgba(36, 53, 45, 0.12);

  /* Shadows */
  --ost-shadow-soft: 0 1px 2px rgba(36, 53, 45, 0.04), 0 8px 24px rgba(36, 53, 45, 0.06);
  --ost-shadow-card: 0 2px 4px rgba(36, 53, 45, 0.04), 0 16px 40px rgba(36, 53, 45, 0.08);
  --ost-shadow-glow: 0 30px 80px -20px rgba(40, 89, 67, 0.35);

  /* Gradients */
  --ost-gradient-forest: linear-gradient(135deg, #285943, #214b38);
  --ost-gradient-hero:
    radial-gradient(60% 50% at 80% 10%, rgba(212, 168, 106, 0.18), transparent 60%),
    radial-gradient(50% 40% at 10% 90%, rgba(40, 89, 67, 0.10), transparent 70%),
    var(--ost-cream);
  --ost-grain: radial-gradient(circle at 1px 1px, rgba(36, 53, 45, 0.04) 1px, transparent 0);

  /* Type & motion */
  --ost-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ost-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ost-radius: 1rem;
  --ost-container: 80rem; /* max-w-7xl */
}

/* Shared keyframes used across theme + widgets */
@keyframes ost-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ost-fade-up { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .ost-animate-float, .ost-animate-fade-up { animation: none !important; }
}