/**
 * Design tokens — single source of truth (semantic only).
 * Link before all other stylesheets on production pages.
 */

:root {
  /* Brand & text */
  --color-brand: #0a6a47;
  --color-brand-dark: #06402b;
  --color-text-primary: #3b4d50;
  --color-text-muted: rgba(59, 77, 80, 0.8);
  --color-text-muted-strong: rgba(59, 77, 80, 0.95);
  --color-text-muted-soft: rgba(59, 77, 80, 0.7);
  --color-text-muted-faint: rgba(59, 77, 80, 0.6);
  --color-text-secondary: rgba(59, 77, 80, 0.9);
  --color-text-on-brand: #ffffff;
  --color-text-on-dark: #ffffff;
  --color-text-heading: #222222;
  --color-text-meta: #717171;
  --color-text-secondary-ui: #666666;
  --color-text-disabled: #999999;

  /* Surfaces & background */
  --color-background-gradient: linear-gradient(
    to right bottom,
    #edf1f5 0%,
    #e8eef4 25%,
    #eef2f6 60%,
    #f1f3f6 100%
  );
  --color-surface: #ffffff;
  --color-surface-raised: #fafafa;
  --color-surface-subtle: #f5f5f5;
  --color-surface-muted: #f0f0f0;
  --color-surface-panel: #f6f9fc;
  --color-surface-warm: #f7f5f2;
  --color-surface-scrollbar: #f1f1f1;
  --color-surface-overlay-light: rgba(255, 255, 255, 0.9);
  --color-surface-overlay-strong: rgba(255, 255, 255, 0.95);
  --color-surface-glass: rgba(255, 255, 255, 0.35);

  /* Borders */
  --color-border: rgba(10, 106, 71, 0.14);
  --color-border-brand-subtle: rgba(10, 106, 71, 0.1);
  --color-border-brand: rgba(10, 106, 71, 0.15);
  --color-border-brand-medium: rgba(10, 106, 71, 0.2);
  --color-border-brand-strong: rgba(10, 106, 71, 0.25);
  --color-border-brand-emphasis: rgba(10, 106, 71, 0.3);
  --color-border-brand-heavy: rgba(10, 106, 71, 0.4);
  --color-border-brand-dark: rgba(6, 64, 43, 0.2);
  --color-border-brand-dark-strong: rgba(6, 64, 43, 0.3);
  --color-border-neutral: rgba(0, 0, 0, 0.08);
  --color-border-neutral-subtle: rgba(0, 0, 0, 0.05);
  --color-border-white-glass: rgba(255, 255, 255, 0.3);

  /* Brand tints */
  --color-brand-subtle-bg: rgba(10, 106, 71, 0.05);
  --color-brand-subtle-bg-hover: rgba(10, 106, 71, 0.08);
  --color-brand-subtle-bg-active: rgba(10, 106, 71, 0.1);
  --color-brand-subtle-bg-selected: rgba(10, 106, 71, 0.12);
  --color-brand-subtle-bg-strong: rgba(10, 106, 71, 0.15);
  --color-brand-subtle-bg-stronger: rgba(10, 106, 71, 0.18);
  --color-brand-gradient: linear-gradient(145deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
  --color-accent-green-gradient: linear-gradient(
    135deg,
    rgba(18, 190, 128, 0.3) 0%,
    rgba(18, 190, 128, 0.15) 100%
  );
  --color-placeholder-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --color-skeleton-gradient: linear-gradient(135deg, #e0e0e0 0%, #d0d0d0 100%);
  --color-highlight-gradient: linear-gradient(135deg, #c8e8d8 0%, #b3dcc8 50%, #a0d0b8 100%);

  /* Overlays & scrims */
  --color-overlay-dark: rgba(0, 0, 0, 0.4);
  --color-overlay-dark-medium: rgba(0, 0, 0, 0.45);
  --color-overlay-dark-strong: rgba(0, 0, 0, 0.5);
  --color-overlay-dark-heavy: rgba(0, 0, 0, 0.9);
  --color-overlay-banner: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  --color-overlay-banner-light: linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
  --color-overlay-image-top: linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
  --color-overlay-image-top-subtle: linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 0%, transparent 60%);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.15);
  --shadow-elevated-strong: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-elevated-heavy: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-brand: 0 4px 12px rgba(10, 106, 71, 0.3);
  --shadow-brand-hover: 0 6px 16px rgba(10, 106, 71, 0.4);
  --shadow-inset-button: inset 0 1px 2px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(0, 0, 0, 0.15);
  --shadow-inset-button-hover: inset 0 1px 2px rgba(255, 255, 255, 0.3),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2);
  --shadow-drop-soft: 0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-text-on-image: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-panel: 0 4px 20px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
  --shadow-panel-hover: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-focus-ring: 0 0 0 3px rgba(10, 106, 71, 0.15);

  /* Misc semantic colors */
  --color-black: #000000;
  --color-accent-heart: #c85a6b;
  --color-scrollbar-thumb: rgba(0, 0, 0, 0.3);
  --color-progress-track: rgba(59, 77, 80, 0.22);
  --color-focus-outline: var(--color-brand);
  --color-focus-outline-dark: var(--color-brand-dark);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 50%;

  /* Spacing (reused layout rhythm) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Motion */
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 420ms;
  --duration-carousel: 500ms;
  --easing-standard: ease;
  --easing-emphasis: ease-out;
  --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: var(--duration-fast) var(--easing-standard);
  --transition-normal: var(--duration-normal) var(--easing-standard);
  --transition-slow: var(--duration-slow) var(--easing-emphasis);
  --transition-smooth: var(--duration-normal) var(--easing-smooth);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}