/* =============================================================
   Qyrona Design Tokens — variables.css
   Import this file first in index.html before all other styles.
   ============================================================= */

:root {

  /* -----------------------------------------------------------
     Colors — Base palette (mirrors Tailwind Gray + Blue scale)
  ----------------------------------------------------------- */
  --color-white:    #ffffff;
  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  --color-green-500: #22c55e;

  /* -----------------------------------------------------------
     Colors — Semantic aliases
  ----------------------------------------------------------- */
  /* Text */
  --color-text-primary:   var(--color-gray-800);   /* headings */
  --color-text-secondary: var(--color-gray-600);   /* body / descriptions */
  --color-text-muted:     var(--color-gray-500);   /* captions, hints */
  --color-text-dark:      var(--color-gray-900);   /* prices, emphasis */
  --color-text-list:      var(--color-gray-700);   /* list items */

  /* Backgrounds */
  --color-bg-page:        var(--color-white);
  --color-bg-card:        var(--color-white);
  --color-bg-subtle:      var(--color-gray-50);    /* FAQ summary */
  --color-bg-light:       var(--color-gray-100);   /* hover states, price badge */
  --color-bg-footer:      var(--color-gray-800);   /* footer background */

  /* Borders */
  --color-border:         var(--color-gray-200);

  /* Brand / CTA */
  --color-primary:        var(--color-blue-600);
  --color-primary-hover:  var(--color-blue-700);

  --color-success:        var(--color-green-500);  /* ✓ checkmarks */
  --color-star:           #f59e0b;                 /* ★ star ratings */

  /* -----------------------------------------------------------
     Button colors
  ----------------------------------------------------------- */
  --btn-gray-bg:          var(--color-gray-200);
  --btn-gray-hover:       var(--color-gray-300);
  --btn-gray-text:        var(--color-text-primary);

  --btn-dark-bg:          var(--color-gray-800);
  --btn-dark-hover:       var(--color-gray-900);
  --btn-dark-text:        var(--color-white);

  --btn-light-shadow:     rgba(0, 0, 0, 0.15);

  /* -----------------------------------------------------------
     Sizes — reusable component dimensions
  ----------------------------------------------------------- */
  --size-avatar: 2.5rem;   /* circular badge: step-number, testimonial-avatar */

  /* -----------------------------------------------------------
     Typography
  ----------------------------------------------------------- */
  --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */

  --font-weight-normal:   400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.4;
  --line-height-normal: 1.6;

  /* -----------------------------------------------------------
     Spacing
  ----------------------------------------------------------- */
  --spacing-1:  0.25rem;   /* 4px  */
  --spacing-2:  0.5rem;    /* 8px  */
  --spacing-3:  0.75rem;   /* 12px */
  --spacing-4:  1rem;      /* 16px */
  --spacing-5:  1.25rem;   /* 20px */
  --spacing-6:  1.5rem;    /* 24px */
  --spacing-8:  2rem;      /* 32px */
  --spacing-10: 2.5rem;    /* 40px */

  /* -----------------------------------------------------------
     Border radius
  ----------------------------------------------------------- */
  --radius-sm:   0.375rem;  /* buttons */
  --radius-md:   0.5rem;    /* cards */
  --radius-full: 9999px;    /* pill / badge */

  /* -----------------------------------------------------------
     Shadows
  ----------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);   /* subtle cards */
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.10);   /* standard cards */
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.10);  /* hover elevation */

  /* -----------------------------------------------------------
     Transitions
  ----------------------------------------------------------- */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.3s ease;

  /* -----------------------------------------------------------
     Layout
  ----------------------------------------------------------- */
  --max-width-content: 800px;   /* narrow containers: FAQ */
  --max-width-wide:   1200px;   /* wide containers: Benefits */

  --grid-gap-sm: var(--spacing-4);   /* 16px */
  --grid-gap-md: var(--spacing-5);   /* 20px */
  --grid-gap-lg: var(--spacing-6);   /* 24px */
}

/* --- Mobile responsive adjustments ----------------------- */
@media (max-width: 768px) {
  :root {
    --grid-gap-sm: var(--spacing-2);   /* 8px */
    --grid-gap-md: var(--spacing-3);   /* 12px */
    --grid-gap-lg: var(--spacing-4);   /* 16px */
  }
}

/* --- Dark theme ------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Backgrounds */
    --color-bg-page:    var(--color-gray-900);
    --color-bg-card:    var(--color-gray-800);
    --color-bg-subtle:  var(--color-gray-800);
    --color-bg-light:   var(--color-gray-700);
    --color-bg-footer:  #030712;               /* deeper than gray-900 for contrast */

    /* Borders */
    --color-border:     var(--color-gray-700);

    /* Text */
    --color-text-primary:   var(--color-gray-50);
    --color-text-secondary: var(--color-gray-300);
    --color-text-muted:     var(--color-gray-400);
    --color-text-dark:      var(--color-white);
    --color-text-list:      var(--color-gray-300);

    /* Shadows — stronger on dark backgrounds */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.60);

    /* Button colors in dark mode */
    --btn-gray-bg:          var(--color-gray-700);
    --btn-gray-hover:       var(--color-gray-600);
    --btn-gray-text:        var(--color-text-primary);

    --btn-dark-bg:          var(--color-gray-900);
    --btn-dark-hover:       var(--color-gray-800);
    --btn-dark-text:        var(--color-white);

    --btn-light-shadow:     rgba(0, 0, 0, 0.40);
  }
}