/**
 * Rostam AI — Design Tokens & Core Motion System
 * Color Strategy: 60 / 30 / 10 Strict Light Theme
 * 60% Neutrals: white #FFFFFF | paper #FBF8F3 | cloud #F2F7F7
 * 30% Brand Turquoise (Single Hue Family):
 *   50 #E8F7F6 | 100 #C9EEEC | 200 #9BE0DC | 300 #5FCFC9 | 400 #25B8B1
 *   500 #0FA39C | 600 #0A8C86 | 700 #087A75 | 800 #065F5B | 900 #0B3F3D
 * 10% Orange Accent (CTAs & Recommended Only):
 *   400 #FFA24C | 500 #FF7A1A | 600 #F26407 | tint #FFF1E3
 * Semantic ONLY:
 *   success #16A34A / tint #E7F7EC | warning #F59E0B | danger #DC2626 | info #0FA39C
 * Ink:
 *   headings #0B2B2A | body #2F4B4A | muted #587472
 * Strictly Prohibited: Lime, Emerald gradients, Sky accents, Multi-hue gradients.
 */

:root {
  /* =========================================================================
     60% NEUTRALS
     ========================================================================= */
  --color-white: #FFFFFF;
  --color-paper: #FBF8F3;       /* Warm off-white (Hero, Steps, Footer) */
  --color-cloud: #F2F7F7;       /* Cool very light neutral (Bento, FAQ, Comparison) */

  --surface-cream: var(--color-paper);
  --color-bg: var(--color-paper);
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-cloud);
  
  /* Borders */
  --border-card: #E3EEEE;
  --border-subtle: #E3EEEE;
  --border-hairline: rgba(11, 43, 42, 0.08);

  /* =========================================================================
     30% BRAND TURQUOISE — Single Hue Family
     ========================================================================= */
  --turquoise-50:  #E8F7F6;
  --turquoise-100: #C9EEEC;
  --turquoise-200: #9BE0DC;
  --turquoise-300: #5FCFC9;
  --turquoise-400: #25B8B1;
  --turquoise-500: #0FA39C;  /* Primary brand core & focus ring */
  --turquoise-600: #0A8C86;  /* Deep brand focus, borders, highlighted phrase */
  --turquoise-700: #087A75;  /* Solid bands (Stats, CTA), high contrast text */
  --turquoise-800: #065F5B;  /* Deep structural brand */
  --turquoise-900: #0B3F3D;  /* Darkest teal anchor */

  /* Primary Brand Aliases */
  --color-primary-50:  var(--turquoise-50);
  --color-primary-100: var(--turquoise-100);
  --color-primary-200: var(--turquoise-200);
  --color-primary-300: var(--turquoise-300);
  --color-primary-400: var(--turquoise-400);
  --color-primary-500: var(--turquoise-500);
  --color-primary-600: var(--turquoise-600);
  --color-primary-700: var(--turquoise-700);
  --color-primary-800: var(--turquoise-800);
  --color-primary-900: var(--turquoise-900);

  /* =========================================================================
     10% ORANGE ACCENT — CTAs & Recommended Only
     ========================================================================= */
  --orange-400:  #FFA24C;    /* Bright amber CTA highlight */
  --orange-500:  #FF7A1A;    /* Primary vibrant orange CTA */
  --orange-600:  #F26407;    /* Punchy rich orange hover */
  --orange-tint: #FFF1E3;    /* Very light warm orange tint */
  --orange-50:   var(--orange-tint);
  --orange-100:  #FFE4CC;

  --color-accent-400: var(--orange-400);
  --color-accent-500: var(--orange-500);
  --color-accent-600: var(--orange-600);
  --color-accent-tint: var(--orange-tint);

  /* Button Tokens */
  --btn-primary-bg: linear-gradient(135deg, #FF7A1A 0%, #FFA24C 100%);
  --btn-primary-hover: linear-gradient(135deg, #F26407 0%, #FF7A1A 100%);
  --btn-primary-text: #0B2B2A; /* Deep ink bold text for AA contrast */
  --btn-orange-gradient: var(--btn-primary-bg);
  --btn-orange-hover: var(--btn-primary-hover);
  --btn-orange-text: var(--btn-primary-text);

  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-border: var(--turquoise-600);
  --btn-secondary-text: var(--turquoise-600);
  --btn-secondary-hover: var(--turquoise-50);

  /* =========================================================================
     SEMANTIC ONLY (Never for decoration or section backgrounds)
     ========================================================================= */
  --success-green: #16A34A;
  --success-tint:  #E7F7EC;
  --warning-amber: #F59E0B;
  --danger-red:    #DC2626;
  --danger-tint:   #FEE2E2;
  --info-turquoise: var(--turquoise-500);

  /* Compatibility aliases */
  --emerald-50:  var(--success-tint);
  --emerald-100: #DCFCE7;
  --emerald-500: var(--success-green);
  --emerald-600: #15803D;
  --emerald-700: #166534;

  /* =========================================================================
     DEEP INK TYPOGRAPHY NEUTRALS
     ========================================================================= */
  --ink:          #0B2B2A;   /* Headings: Deep teal-ink authority */
  --ink-headings: #0B2B2A;
  --text-body:    #2F4B4A;   /* Body text: High readability */
  --text-muted:   #587472;   /* Secondary & captions */
  --color-ink:    var(--ink);
  --color-body:   var(--text-body);
  --color-muted:  var(--text-muted);

  /* =========================================================================
     SECTION BACKGROUND RHYTHM TOKENS (No two adjacent the same)
     ========================================================================= */
  --bg-hero:        var(--color-paper);     /* #FBF8F3 */
  --bg-marquee:     var(--color-white);     /* #FFFFFF */
  --bg-roles:       var(--color-white);     /* #FFFFFF */
  --bg-bento:       var(--color-cloud);     /* #F2F7F7 */
  --bg-stats:       var(--turquoise-700);   /* #087A75 */
  --bg-steps:       var(--color-paper);     /* #FBF8F3 */
  --bg-pricing:     var(--color-white);     /* #FFFFFF */
  --bg-comparison:  var(--color-cloud);     /* #F2F7F7 */
  --bg-faq:         var(--color-cloud);     /* #F2F7F7 */
  --bg-cta:         linear-gradient(180deg, #087A75 0%, #065F5B 100%); /* #087A75 -> #065F5B */
  --bg-footer:      var(--color-paper);     /* #FBF8F3 */

  /* Legacy surface aliases re-mapped to rhythm */
  --surface-aqua:   var(--color-cloud);
  --surface-peach:  var(--color-paper);
  --surface-lime:   var(--color-cloud);
  --surface-bold:   linear-gradient(180deg, #087A75 0%, #065F5B 100%);
  --surface-card:   #FFFFFF;
  --surface-card-tint: #FFFFFF;

  /* =========================================================================
     AMBIENT SHADOWS (Low-opacity turquoise tint)
     ========================================================================= */
  --shadow-sm: 0 2px 8px rgba(8, 122, 117, 0.05);
  --shadow-md: 0 8px 24px -4px rgba(8, 122, 117, 0.08), 0 2px 6px rgba(8, 122, 117, 0.03);
  --shadow-lg: 0 16px 36px -6px rgba(8, 122, 117, 0.12), 0 4px 12px rgba(8, 122, 117, 0.04);
  --shadow-card: 0 4px 20px -2px rgba(8, 122, 117, 0.06), 0 1px 3px rgba(8, 122, 117, 0.03);
  --shadow-card-hover: 0 16px 36px -4px rgba(8, 122, 117, 0.12), 0 4px 12px rgba(8, 122, 117, 0.06);
  --shadow-orange: 0 8px 24px -3px rgba(255, 122, 26, 0.35);
  --shadow-orange-cta: 0 8px 24px -3px rgba(255, 122, 26, 0.35), 0 3px 8px rgba(255, 122, 26, 0.15);

  /* Typography & Timing */
  --font-sans: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

/* =========================================================================
   Motion & Animation Keyframes
   ========================================================================= */

@keyframes float-subtle {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(0.8deg);
  }
}

@keyframes float-gentle-reverse {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(7px) rotate(-0.8deg);
  }
}

@keyframes rotate-conic {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes marquee-rtl {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(50%);
  }
}

@keyframes button-shine {
  0% {
    transform: translateX(-150%) skewX(-20deg);
  }
  50%, 100% {
    transform: translateX(250%) skewX(-20deg);
  }
}

@keyframes wave-bounce {
  0%, 100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 163, 156, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(15, 163, 156, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(15, 163, 156, 0);
  }
}

/* =========================================================================
   Utility Classes
   ========================================================================= */

.rostam-float {
  animation: float-subtle 6s ease-in-out infinite;
  will-change: transform;
}

.rostam-float-rev {
  animation: float-gentle-reverse 7s ease-in-out infinite;
  will-change: transform;
}

.rostam-conic-glow {
  position: relative;
  overflow: hidden;
}

.rostam-conic-glow::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    transparent,
    rgba(15, 163, 156, 0.5),
    rgba(255, 122, 26, 0.5),
    transparent 45%
  );
  animation: rotate-conic 8s linear infinite;
  z-index: 0;
}

.rostam-shine-btn {
  position: relative;
  overflow: hidden;
}

.rostam-shine-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  animation: button-shine 4s ease-in-out infinite;
}

.rostam-glass-nav {
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-normal) var(--ease-spring);
}

.rostam-glass-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-md);
  border-color: var(--turquoise-200);
}

/* =========================================================================
   Accessibility & 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;
  }
  .rostam-float,
  .rostam-float-rev,
  .rostam-conic-glow::before,
  .rostam-shine-btn::after {
    animation: none !important;
  }
}

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

/* =========================================================================
   Unified Component Classes & Color-Blocking Surfaces
   ========================================================================= */

.btn-orange {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255, 122, 26, 0.4) !important;
  box-shadow: var(--shadow-orange-cta) !important;
  transition: all var(--duration-fast) var(--ease-spring) !important;
}

.btn-orange:hover {
  background: var(--btn-primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -4px rgba(255, 122, 26, 0.45) !important;
}

.btn-orange:active {
  transform: translateY(0);
}

.btn-turquoise-outline {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
  border: 1.5px solid var(--btn-secondary-border) !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--duration-fast) var(--ease-spring) !important;
}

.btn-turquoise-outline:hover {
  background: var(--btn-secondary-hover) !important;
  border-color: var(--turquoise-700) !important;
  color: var(--turquoise-800) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

/* Color-Blocking Section Utility Classes */
.bg-surface-cream { background-color: var(--color-paper) !important; }
.bg-surface-aqua  { background-color: var(--color-cloud) !important; }
.bg-surface-peach { background-color: var(--color-paper) !important; }
.bg-surface-lime  { background-color: var(--color-cloud) !important; }
.bg-surface-bold  { background: var(--bg-cta) !important; color: #FFFFFF !important; }