/**
 * THE CONNECTED HAVEN - CSS VARIABLES
 * Smart Home Technology Simplified
 *
 * This file contains all CSS custom properties for the TCH design system.
 * These variables are also injected via Elementor snippet (ID: 582) for live site.
 *
 * @version 1.0.0
 * @updated 2025-12-16
 */

:root {
  /* ============================================
     PRIMARY PALETTE - Haven Blue
     Trust, technology, calm
     ============================================ */
  --tch-primary: #2563eb;
  --tch-primary-dark: #1d4ed8;
  --tch-primary-light: #3b82f6;
  --tch-primary-lighter: #60a5fa;

  /* ============================================
     SECONDARY PALETTE - Warm Home Orange/Amber
     Comfort, approachability, warmth
     ============================================ */
  --tch-secondary: #f59e0b;
  --tch-secondary-dark: #d97706;
  --tch-secondary-light: #fbbf24;

  /* ============================================
     ACCENT - Connected Green
     Smart, active, eco-friendly
     ============================================ */
  --tch-accent: #10b981;
  --tch-accent-dark: #059669;
  --tch-accent-light: #34d399;

  /* ============================================
     NEUTRALS
     ============================================ */
  --tch-dark: #1e293b;
  --tch-text: #334155;
  --tch-muted: #64748b;
  --tch-light: #f1f5f9;
  --tch-lighter: #f8fafc;
  --tch-white: #ffffff;

  /* ============================================
     ECOSYSTEM COLORS
     Brand colors for each smart home platform
     ============================================ */
  --ecosystem-alexa: #00caff;
  --ecosystem-homekit: #000000;
  --ecosystem-google: #4285f4;
  --ecosystem-smartthings: #15bfff;
  --ecosystem-matter: #7c3aed;

  /* ============================================
     STATUS COLORS
     ============================================ */
  --status-success: #22c55e;
  --status-warning: #f59e0b;
  --status-error: #ef4444;
  --status-info: #3b82f6;

  /* ============================================
     GRADIENTS
     ============================================ */
  --tch-gradient: linear-gradient(135deg, var(--tch-primary) 0%, var(--tch-primary-light) 100%);
  --tch-warm-gradient: linear-gradient(135deg, var(--tch-secondary) 0%, var(--tch-secondary-light) 100%);
  --tch-accent-gradient: linear-gradient(135deg, var(--tch-accent) 0%, var(--tch-accent-light) 100%);
  --tch-hero-gradient: linear-gradient(180deg, rgba(15,23,42,0.9) 0%, rgba(15,23,42,0.7) 100%);

  /* ============================================
     BLOCKSY THEME PALETTE MAPPING
     These override Blocksy's default palette
     ============================================ */
  --theme-palette-color-1: #2563eb; /* Primary */
  --theme-palette-color-2: #1d4ed8; /* Primary Dark */
  --theme-palette-color-3: #334155; /* Text */
  --theme-palette-color-4: #1e293b; /* Dark */
  --theme-palette-color-5: #f1f5f9; /* Light */
  --theme-palette-color-6: #f8fafc; /* Lighter */
  --theme-palette-color-7: #ffffff; /* White */
  --theme-palette-color-8: #ffffff; /* White */

  /* ============================================
     SHADOWS
     ============================================ */
  --tch-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --tch-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --tch-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --tch-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --tch-shadow-primary: 0 4px 14px rgba(37, 99, 235, 0.3);
  --tch-shadow-secondary: 0 4px 14px rgba(245, 158, 11, 0.3);
  --tch-shadow-accent: 0 4px 14px rgba(16, 185, 129, 0.3);

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --tch-radius-sm: 4px;
  --tch-radius: 8px;
  --tch-radius-md: 12px;
  --tch-radius-lg: 16px;
  --tch-radius-xl: 24px;
  --tch-radius-full: 9999px;

  /* ============================================
     TRANSITIONS
     ============================================ */
  --tch-transition-fast: 150ms ease;
  --tch-transition: 200ms ease;
  --tch-transition-slow: 300ms ease;
}

/* ============================================
   BASE STYLES
   ============================================ */

/* Text Color */
body {
  color: var(--tch-text);
}

/* Links */
a {
  color: var(--tch-primary);
  transition: color var(--tch-transition);
}

a:hover {
  color: var(--tch-primary-dark);
}

/* Selection */
::selection {
  background: var(--tch-primary);
  color: var(--tch-white);
}

::-moz-selection {
  background: var(--tch-primary);
  color: var(--tch-white);
}

/* ============================================
   BUTTON STYLES
   ============================================ */

.ct-button,
.wp-block-button__link,
button:not([class*="close"]),
input[type="submit"],
.elementor-button {
  background: var(--tch-primary) !important;
  color: var(--tch-white) !important;
  border-radius: var(--tch-radius-md) !important;
  border: none !important;
  transition: all var(--tch-transition) !important;
}

.ct-button:hover,
.wp-block-button__link:hover,
button:not([class*="close"]):hover,
input[type="submit"]:hover,
.elementor-button:hover {
  background: var(--tch-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--tch-shadow-primary);
}

/* Outline/Ghost Buttons */
.is-style-outline .wp-block-button__link,
.ct-button-ghost {
  background: transparent !important;
  border: 2px solid var(--tch-primary) !important;
  color: var(--tch-primary) !important;
}

.is-style-outline .wp-block-button__link:hover,
.ct-button-ghost:hover {
  background: var(--tch-primary) !important;
  color: var(--tch-white) !important;
}

/* Secondary Buttons */
.btn-secondary,
.ct-button-secondary {
  background: var(--tch-secondary) !important;
}

.btn-secondary:hover,
.ct-button-secondary:hover {
  background: var(--tch-secondary-dark) !important;
  box-shadow: var(--tch-shadow-secondary);
}

/* Accent Buttons */
.btn-accent,
.ct-button-accent {
  background: var(--tch-accent) !important;
}

.btn-accent:hover,
.ct-button-accent:hover {
  background: var(--tch-accent-dark) !important;
  box-shadow: var(--tch-shadow-accent);
}

/* ============================================
   FORM STYLES
   ============================================ */

input:focus,
textarea:focus,
select:focus {
  border-color: var(--tch-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  outline: none;
}

/* ============================================
   COMPONENT STYLES
   ============================================ */

/* Tags/Badges */
.ct-badge,
.tag,
.wp-block-tag-cloud a {
  background: var(--tch-light);
  color: var(--tch-primary);
  border-radius: var(--tch-radius);
}

/* Blockquotes */
blockquote,
.wp-block-quote {
  border-left: 4px solid var(--tch-primary);
  background: var(--tch-lighter);
  padding: 1.5rem;
  border-radius: 0 var(--tch-radius) var(--tch-radius) 0;
}

/* Header */
.ct-header {
  background: var(--tch-white);
}

.ct-menu > li > a {
  color: var(--tch-text);
}

.ct-menu > li > a:hover {
  color: var(--tch-primary);
}

/* Footer */
.ct-footer {
  background: var(--tch-dark);
  color: var(--tch-light);
}

.ct-footer a {
  color: var(--tch-light);
}

.ct-footer a:hover {
  color: var(--tch-primary-light);
}

/* ============================================
   ECOSYSTEM-SPECIFIC STYLES
   ============================================ */

.ecosystem-alexa {
  --ecosystem-color: var(--ecosystem-alexa);
}

.ecosystem-homekit {
  --ecosystem-color: var(--ecosystem-homekit);
}

.ecosystem-google {
  --ecosystem-color: var(--ecosystem-google);
}

.ecosystem-smartthings {
  --ecosystem-color: var(--ecosystem-smartthings);
}

.ecosystem-matter {
  --ecosystem-color: var(--ecosystem-matter);
}

/* Ecosystem Cards */
.ecosystem-card {
  border-top: 4px solid var(--ecosystem-color, var(--tch-primary));
}

.ecosystem-card:hover {
  box-shadow: 0 0 0 1px var(--ecosystem-color, var(--tch-primary));
}