/* =============================================================================
   CLOUDCAREHOST — MASTER DESIGN TOKEN FILE
   White theme · Sky blue accent · Single button color
   Change values here to update the entire site.
   ============================================================================= */

:root {

  /* --- Sky Blue Brand Palette --- */
  --primitive-sky-50:   #f0f9ff;
  --primitive-sky-100:  #e0f2fe;
  --primitive-sky-200:  #bae6fd;
  --primitive-sky-400:  #38bdf8;
  --primitive-sky-500:  #0ea5e9;  /* primary / all buttons */
  --primitive-sky-600:  #0284c7;  /* hover */
  --primitive-sky-700:  #0369a1;
  --primitive-sky-glow: rgba(14, 165, 233, 0.15);
  --primitive-sky-glow1: rgba(14, 165, 233, 0.08);
  --primitive-sky-glow2: rgba(14, 165, 233, 0.10);
  --primitive-sky-glow3: rgba(14, 165, 233, 0.20);
  --primitive-sky-shadow: rgba(14, 165, 233, 0.35);
  --primitive-sky-hover-ring: rgba(14, 165, 233, 0.30);

  /* --- Neutrals (white theme) --- */
  --primitive-white:      #ffffff;
  --primitive-gray-50:    #f8fafc;
  --primitive-gray-50b:   #f9fafb;
  --primitive-gray-100:   #f3f4f6;
  --primitive-gray-200:   #e5e7eb;
  --primitive-gray-300:   #e2e8f0;
  --primitive-gray-350:   #d1d5db;
  --primitive-gray-400:   #94a3b8;
  --primitive-gray-500:   #6b7280;
  --primitive-gray-600:   #4b5563;
  --primitive-gray-700:   #374151;
  --primitive-gray-800:   #1f2937;
  --primitive-gray-900:   #111827;

  --primitive-red-500:    #ef4444;
  --primitive-amber-500:  #f59e0b;
  --primitive-emerald-500:#10b981;

  /* --- Spacing --- */
  --primitive-space-1:    4px;
  --primitive-space-2:    8px;
  --primitive-space-3:    12px;
  --primitive-space-4:    16px;
  --primitive-space-5:    20px;
  --primitive-space-6:    24px;
  --primitive-space-8:    30px;
  --primitive-space-10:   40px;
  --primitive-space-12:   48px;
  --primitive-space-14:   50px;
  --primitive-space-15:   60px;
  --primitive-space-16:   64px;
  --primitive-space-20:   80px;
  --primitive-space-25:   100px;

  /* --- Sizes --- */
  --primitive-size-container: 1200px;
  --primitive-size-container-xl: 1280px;
  --primitive-size-faq-max: 800px;
  --primitive-size-hero-text-max: 800px;
  --primitive-size-cta-text-max: 600px;
  --primitive-size-icon-component: 64px;
  --primitive-size-icon-xl: 80px;
  --primitive-size-nav-h: 72px;

  /* --- Border Radius --- */
  --primitive-radius-sm:  4px;
  --primitive-radius-md:  8px;
  --primitive-radius-lg:  12px;
  --primitive-radius-xl:  16px;
  --primitive-radius-2xl: 24px;
  --primitive-radius-full: 9999px;

  /* --- Shadows --- */
  --primitive-shadow-sm:  0 5px 15px rgba(0,0,0,0.05);
  --primitive-shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --primitive-shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --primitive-shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --primitive-shadow-badge: 0 2px 4px rgba(0,0,0,0.1);
  --primitive-shadow-ribbon: 0 2px 4px rgba(0,0,0,0.2);
  --primitive-shadow-cta-btn: 0 4px 14px 0 var(--primitive-sky-shadow);
  --primitive-shadow-logo: 0 10px 15px -3px rgba(14,165,233,0.4);
  --primitive-shadow-plan-hover: 0 0 30px rgba(14,165,233,0.10);
  --primitive-shadow-btn-accent: 0 0 25px rgba(14,165,233,0.30);
  --primitive-shadow-tech-hover: 0 0 15px rgba(14,165,233,0.15);

  /* --- Typography --- */
  --primitive-font-family: 'Poppins', sans-serif;
  --primitive-font-size-xs:   0.75rem;
  --primitive-font-size-sm:   0.875rem;
  --primitive-font-size-base: 1rem;
  --primitive-font-size-lg:   1.2rem;
  --primitive-font-size-xl:   1.3rem;
  --primitive-font-size-2xl:  1.8rem;
  --primitive-font-size-3xl:  2rem;
  --primitive-font-size-4xl:  2.2rem;
  --primitive-font-size-5xl:  2.5rem;
  --primitive-font-weight-normal: 400;
  --primitive-font-weight-medium: 500;
  --primitive-font-weight-semi:   600;
  --primitive-font-weight-bold:   700;
  --primitive-font-weight-xbold:  800;
  --primitive-line-height: 1.6;

  /* --- Transitions --- */
  --primitive-duration-fast: 150ms;
  --primitive-duration-base: 300ms;
  --primitive-duration-slow: 6s;
  --primitive-duration-scroll: 30s;
  --primitive-easing-ease: ease;
  --primitive-easing-ease-out: ease-out;
  --primitive-easing-in-out: ease-in-out;
  --primitive-easing-linear: linear;

  /* --- Z-index --- */
  --primitive-z-1: 1;
  --primitive-z-40: 40;
  --primitive-z-50: 50;

  /* --- Gradients (subtle sky blue washes) --- */
  --gradient-sky-subtle: linear-gradient(135deg, var(--primitive-sky-50) 0%, var(--primitive-white) 100%);
  --gradient-sky-hero: linear-gradient(to bottom, var(--primitive-sky-50) 0%, var(--primitive-white) 60%);
  --gradient-sky-section: linear-gradient(to right, var(--primitive-sky-50), var(--primitive-white));
  --gradient-sky-text: linear-gradient(135deg, var(--primitive-sky-600), var(--primitive-sky-400));
  --gradient-sky-radial: radial-gradient(ellipse 80% 60% at 50% 40%, var(--primitive-sky-glow1) 0%, transparent 70%);
  --gradient-sky-stats: linear-gradient(135deg, rgba(14,165,233,0.08) 0%, var(--primitive-gray-100) 100%);
}

/* =============================================================================
   SEMANTIC TOKENS
   ============================================================================= */

:root {

  /* Brand — single sky blue controls buttons, links, accents */
  --color-primary:          var(--primitive-sky-500);
  --color-primary-hover:    var(--primitive-sky-600);
  --color-primary-light:    var(--primitive-sky-400);
  --color-primary-dark:     var(--primitive-sky-700);
  --color-primary-glow:     var(--primitive-sky-glow);
  --color-primary-shadow:   var(--primitive-sky-shadow);

  /* Surfaces — white theme */
  --color-bg-base:          var(--primitive-white);
  --color-bg-body:          var(--primitive-gray-50);
  --color-bg-surface:       var(--primitive-white);
  --color-bg-secondary:     var(--primitive-gray-50b);
  --color-bg-muted:         var(--primitive-gray-100);
  --color-bg-footer:        var(--primitive-white);
  --color-bg-footer-bottom: var(--primitive-gray-100);
  --color-bg-input:         var(--primitive-white);

  /* Text */
  --color-text-primary:     var(--primitive-gray-900);
  --color-text-secondary:   var(--primitive-gray-700);
  --color-text-muted:       var(--primitive-gray-500);
  --color-text-light:       var(--primitive-gray-600);
  --color-text-inverted:    var(--primitive-white);
  --color-text-heading:     var(--primitive-gray-900);
  --color-text-link:        var(--color-primary);
  --color-text-nav:         var(--primitive-gray-800);

  /* State */
  --color-success:          var(--primitive-emerald-500);
  --color-warning:          var(--primitive-amber-500);
  --color-danger:           var(--primitive-red-500);

  /* Border */
  --color-border:           var(--primitive-gray-200);
  --color-border-muted:     var(--primitive-gray-300);
  --color-border-input:     var(--primitive-gray-350);
  --color-border-focus:     var(--color-primary);

  /* Typography */
  --font-family-base:       var(--primitive-font-family);
  --font-size-xs:           var(--primitive-font-size-xs);
  --font-size-sm:           var(--primitive-font-size-sm);
  --font-size-base:         var(--primitive-font-size-base);
  --font-size-lg:           var(--primitive-font-size-lg);
  --font-size-xl:           var(--primitive-font-size-xl);
  --font-size-2xl:          var(--primitive-font-size-2xl);
  --font-size-3xl:          var(--primitive-font-size-3xl);
  --font-size-4xl:          var(--primitive-font-size-4xl);
  --font-size-5xl:          var(--primitive-font-size-5xl);
  --font-weight-normal:     var(--primitive-font-weight-normal);
  --font-weight-medium:     var(--primitive-font-weight-medium);
  --font-weight-semi:       var(--primitive-font-weight-semi);
  --font-weight-bold:       var(--primitive-font-weight-bold);
  --font-weight-extrabold:  var(--primitive-font-weight-xbold);
  --line-height-body:       var(--primitive-line-height);

  /* Spacing */
  --space-1:  var(--primitive-space-1);
  --space-2:  var(--primitive-space-2);
  --space-3:  var(--primitive-space-3);
  --space-4:  var(--primitive-space-4);
  --space-5:  var(--primitive-space-5);
  --space-6:  var(--primitive-space-6);
  --space-8:  var(--primitive-space-8);
  --space-10: var(--primitive-space-10);
  --space-12: var(--primitive-space-12);
  --space-14: var(--primitive-space-14);
  --space-15: var(--primitive-space-15);
  --space-16: var(--primitive-space-16);
  --space-20: var(--primitive-space-20);
  --space-25: var(--primitive-space-25);

  /* Radius */
  --radius-sm:   var(--primitive-radius-sm);
  --radius-md:   var(--primitive-radius-md);
  --radius-lg:   var(--primitive-radius-lg);
  --radius-xl:   var(--primitive-radius-xl);
  --radius-2xl:  var(--primitive-radius-2xl);
  --radius-full: var(--primitive-radius-full);

  /* Shadows */
  --shadow-sm:  var(--primitive-shadow-sm);
  --shadow-md:  var(--primitive-shadow-md);
  --shadow-lg:  var(--primitive-shadow-lg);
  --shadow-xl:  var(--primitive-shadow-xl);

  /* Layout */
  --layout-container-max: var(--primitive-size-container);
  --layout-container-xl:  var(--primitive-size-container-xl);
  --layout-nav-height:    var(--primitive-size-nav-h);
  --layout-section-py:    var(--primitive-space-20);
  --container-max:        var(--layout-container-max);
  --section-title-mb:     var(--space-14);

  /* Transitions */
  --transition-duration-fast: var(--primitive-duration-fast);
  --transition-duration-base: var(--primitive-duration-base);
  --transition-easing:        var(--primitive-easing-ease);
  --transition-easing-in-out: var(--primitive-easing-in-out);

  /* Z-index */
  --z-ribbon:       var(--primitive-z-1);
  --z-mobile-menu:  var(--primitive-z-40);
  --z-overlay:      var(--primitive-z-50);
  --z-modal:        var(--primitive-z-50);
  --z-toast:        var(--primitive-z-50);

  /* Gradients */
  --gradient-subtle:  var(--gradient-sky-subtle);
  --gradient-hero:    var(--gradient-sky-hero);
  --gradient-section: var(--gradient-sky-section);
  --gradient-text:    var(--gradient-sky-text);
  --gradient-radial:  var(--gradient-sky-radial);
  --gradient-stats:   var(--gradient-sky-stats);

  /* Legacy aliases */
  --primary:      var(--color-primary);
  --primary-dark: var(--color-primary-hover);
  --dark:         var(--color-text-primary);
  --light:        var(--color-bg-body);
  --gray:         var(--color-text-muted);
  --success:      var(--color-success);

  /* CloudCare component aliases */
  --cc-bg-primary:     var(--color-bg-base);
  --cc-bg-secondary:   var(--color-bg-secondary);
  --cc-bg-card:        var(--color-bg-surface);
  --cc-border:         var(--color-border);
  --cc-accent:         var(--color-primary);
  --cc-accent-light:   var(--color-primary-light);
  --cc-accent-glow:    var(--color-primary-glow);
  --cc-text-primary:   var(--color-text-primary);
  --cc-text-secondary: var(--color-text-secondary);
  --cc-text-muted:     var(--color-text-muted);
}

/* =============================================================================
   COMPONENT TOKENS
   ============================================================================= */

:root {

  /* Navigation */
  --nav-bg:              var(--color-bg-surface);
  --nav-text:            var(--color-text-nav);
  --nav-text-hover:      var(--color-primary);
  --nav-logo-bg:         var(--color-primary);
  --nav-logo-shadow:     var(--primitive-shadow-logo);

  /* Buttons — one colour for every button type */
  --btn-bg:              var(--color-primary);
  --btn-bg-hover:        var(--color-primary-hover);
  --btn-text:            var(--color-text-inverted);
  --btn-shadow:          var(--primitive-shadow-cta-btn);
  --btn-radius:          var(--radius-md);
  --btn-base-px:         30px;
  --btn-base-py:         12px;
  --btn-base-font-weight:var(--font-weight-semi);
  --btn-base-transition: all var(--transition-duration-base) var(--transition-easing);

  /* Cards */
  --card-bg:             var(--color-bg-surface);
  --card-border:         1px solid var(--color-border);
  --card-radius:         var(--radius-md);
  --card-padding:        var(--space-8);
  --card-shadow:         var(--shadow-sm);
  --card-hover-transform: translateY(-5px);
  --card-transition:     transform var(--transition-duration-base) var(--transition-easing);

  /* Plan cards — AI Builder clay style */
  --plan-card-bg:        #f3f6fa;
  --plan-card-border:    2px solid #0EA5E9;
  --plan-card-radius:    36px;
  --plan-card-shadow:    20px 20px 40px rgba(163, 177, 198, 0.4), -20px -20px 40px rgba(255, 255, 255, 0.8), inset 6px 6px 15px rgba(255, 255, 255, 0.7), inset -6px -6px 15px rgba(163, 177, 198, 0.1);
  --plan-card-hover-border: 2px solid #0EA5E9;
  --plan-card-hover-shadow: var(--plan-card-shadow);
  --plan-card-hover-transform: translateY(-2px);
  --plan-card-transition: all 0.3s ease;
  --plan-card-cta-shadow: 8px 8px 16px rgba(14, 165, 233, 0.3), -8px -8px 16px rgba(255, 255, 255, 0.8), inset 4px 4px 8px rgba(255, 255, 255, 0.2), inset -4px -4px 8px rgba(0, 0, 0, 0.1);
  --plan-card-cta-hover-shadow: 10px 10px 20px rgba(14, 165, 233, 0.4), -10px -10px 20px rgba(255, 255, 255, 0.9), inset 4px 4px 8px rgba(255, 255, 255, 0.3), inset -4px -4px 8px rgba(0, 0, 0, 0.1);

  /* Feature icon */
  --feature-icon-size:   var(--primitive-size-icon-component);
  --feature-icon-bg:     rgba(14,165,233,0.10);
  --feature-icon-border: 1px solid rgba(14,165,233,0.20);
  --feature-icon-radius: var(--radius-xl);
  --feature-icon-color:  var(--color-primary);
  --feature-icon-font-size: 1.5rem;

  /* Billing toggle — WooCommerce-style pill */
  --billing-toggle-bg:     #ffffff;
  --billing-toggle-border: 1px solid #e2e8f0;
  --billing-toggle-radius: var(--radius-full);
  --billing-toggle-py:     6px;
  --billing-toggle-px:     6px;
  --billing-btn-active-bg:   #0EA5E9;
  --billing-btn-active-text: #ffffff;
  --billing-btn-active-shadow: 0 0 15px rgba(14,165,233,0.25);
  --billing-btn-radius:    var(--radius-full);
  --billing-btn-px:        1.5rem;
  --billing-btn-py:        0.65rem;
  --billing-btn-font-weight: var(--font-weight-semi);
  --billing-btn-idle-text: var(--primitive-gray-600);

  /* Forms */
  --input-bg:           var(--color-bg-input);
  --input-border:       1px solid var(--color-border);
  --input-border-focus: var(--color-border-focus);
  --input-focus-ring:   0 0 0 3px var(--color-primary-glow);
  --input-radius:       var(--radius-md);
  --input-px:           var(--space-4);
  --input-py:           0.75rem;
  --input-text:         var(--color-text-primary);
  --input-placeholder:  var(--color-text-muted);
  --input-transition:   all var(--transition-duration-base) var(--transition-easing);

  /* FAQ */
  --faq-border:         1px solid var(--color-border-muted);
  --faq-radius:         var(--radius-md);
  --faq-question-bg:    var(--color-bg-surface);
  --faq-question-padding: var(--space-5);
  --faq-question-weight: var(--font-weight-semi);
  --faq-answer-transition: max-height var(--transition-duration-base) var(--transition-easing),
                           padding var(--transition-duration-base) var(--transition-easing);
  --faq-max-width:      var(--primitive-size-faq-max);

  /* Footer */
  --footer-bg:          var(--color-bg-footer);
  --footer-border-top:  1px solid var(--color-border);
  --footer-bottom-bg:   var(--color-bg-footer-bottom);
  --footer-link-color:  var(--primitive-gray-600);
  --footer-link-hover:  var(--color-primary);
  --footer-muted-color: var(--primitive-gray-500);

  /* CTA */
  --cta-bg-gradient:    var(--gradient-section);
  --cta-text:           var(--color-text-primary);
  --cta-btn-bg:         var(--color-primary);
  --cta-btn-text:       var(--color-text-inverted);
  --cta-btn-hover-bg:   var(--color-primary-hover);

  /* Stats */
  --stats-bg:           var(--gradient-stats);
  --stats-border:       1px solid var(--color-border);

  /* Tech icons */
  --tech-icon-bg:       var(--color-bg-surface);
  --tech-icon-border:   1px solid var(--color-border);
  --tech-icon-radius:   var(--radius-lg);
  --tech-icon-hover-border: var(--color-primary);
  --tech-icon-hover-shadow: var(--primitive-shadow-tech-hover);

  /* Animations */
  --anim-float-duration:  var(--primitive-duration-slow);
  --anim-float-easing:    var(--primitive-easing-in-out);
  --anim-fade-duration:   0.3s;
  --anim-fade-easing:     var(--primitive-easing-ease-out);
  --anim-scroll-duration: var(--primitive-duration-scroll);
  --anim-scroll-easing:   var(--primitive-easing-linear);

  /* Badges / ribbons */
  --badge-shadow:  var(--primitive-shadow-badge);
  --ribbon-z:      var(--z-ribbon);
  --ribbon-shadow: var(--primitive-shadow-ribbon);
}