/* Vigilis Tree Shelters – Color System CSS Variables */
/* All values extracted from design system and mapped to theme.json */

:root {
  /* Primary Colors (Green – Sustainability) */
  --color-primary-900: #063715;
  --color-primary-800: #08471B;
  --color-primary-700: #246036;
  --color-primary-600: #4F7D5D;
  --color-primary-500: #688B72;
  --color-primary-400: #809D8A;
  --color-primary-300: #AAC7B4;

  /* Typography */
  --font-weight-semibold: 600;

  /* Secondary Colors (Orange – Accent) */
  /* -700 darkened from #B45C08 to #A85107 for WCAG AA contrast on light bg
   * (4.49→5.21 on bg-light). Used for small uppercase labels and
   * blog card links. Brand-faithful, accessible. */
  --color-secondary-700: #A85107;
  /* -600 #EA580C is the heading-accent orange on light backgrounds: brighter
   * and more vivid than -700, and clears WCAG AA for large text (3:1) at
   * 3.56:1 on white. Use ONLY on large bold headings (>=24px/700), never on
   * body or small UI text where 4.5:1 is required (use -700 there). */
  --color-secondary-600: #EA580C;
  --color-secondary-500: #F48113;
  --color-secondary-300: #FFB56E;

  /* Neutral Colors (Text & Backgrounds) */
  --color-neutral-1000: #1C0E32;
  --color-neutral-700: #584D68;
  --color-neutral-600: #6D647B;
  --color-neutral-500: #827A8E;
  --color-neutral-400: #9E99A4;
  --color-neutral-300: #D8D3DF;
  --color-neutral-200: #EAE8F1;
  --color-neutral-100: #F9F7FF;
  --color-neutral-white: #FFFFFF;
  --color-neutral-black: #020202;

  /* Semantic Colors */
  --color-success: var(--color-primary-500);
  --color-warning: var(--color-secondary-500);
  --color-error: #CC0000;
  --color-info: #0066CC;

  /* Text Colors */
  --color-text-primary: var(--color-neutral-1000);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-muted: var(--color-neutral-400);
  --color-text-light: var(--color-neutral-600);

  /* Background Colors */
  --color-bg-light: #fafaf8;
  --color-bg-primary: var(--color-neutral-white);
  --color-bg-secondary: var(--color-neutral-100);
  --color-bg-tertiary: var(--color-neutral-200);
  --color-bg-dark: var(--color-neutral-1000);

  /* Border Colors */
  --color-border: var(--color-neutral-300);
  --color-border-light: var(--color-neutral-200);
  --color-border-dark: var(--color-neutral-400);
}

/* Button States – Responsive padding with touch-friendly targets */
.wp-block-button__link {
  transition: all 200ms ease-in-out;
  /* Default mobile-friendly padding (ensures 44px+ touch target) */
  padding: 16px 24px;
  display: inline-block;
  min-height: 44px;
  min-width: 44px;
}

.wp-block-button__link:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
}

.wp-block-button__link:active {
  transform: translateY(1px);
}

.wp-block-button__link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive button padding (set in layout.css per breakpoint) */
@media (min-width: 768px) {
  .wp-block-button__link {
    padding: 14px 24px;
  }
}

@media (min-width: 1024px) {
  .wp-block-button__link {
    padding: 12px 24px;
  }
}

/* Link States */
a {
  color: var(--color-primary-800);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-900);
  text-decoration: none;
}

a:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Form Elements */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  transition: all 150ms ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary-500);
  outline: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
input[type="number"]:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Accessibility - Focus Visible */
*:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Reduced Motion */
@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;
  }
}