/**
 * CSS Variables - xTools.com
 *
 * Design tokens matched to Figma source of truth.
 * Source: Figma file TUXnIFbDNgFt34a2BWBS4q
 */

:root {
  /* ========================================
     COLORS (Figma verified)
     ======================================== */

  /* Core Colors */
  --color-black: #030b1a;
  --color-white: #FFF;
  --color-dark-gray: #374151;
  --color-light-gray: #E5E7EB;
  --color-gray: #9CA3AF;            /* Gray-400 */

  /* Brand Colors - Figma verified */
  --color-primary: #030b1a;
  --color-primary-hover: #0a1628;
  --color-secondary: #262d3b;
  --color-accent: #030b1a;

  /* Text Colors */
  --color-text: #030b1a;
  --color-text-light: #262d3b;
  --color-text-subtle: #5f6b7a;     /* muted body/meta copy */
  --color-text-muted: #9CA3AF;      /* Gray-400 */
  --color-text-inverse: #FFF;

  /* Background Colors */
  --color-bg: #FFF;
  --color-bg-alt: #F9FAFB;          /* Gray-50 - light sections */
  --color-bg-dark: #0F172A;         /* Slate-900 - footer */

  /* Border Colors */
  --color-border: #E5E7EB;
  --color-border-light: #F3F4F6;    /* Gray-100 */
  --color-divider: #DEDFE2;         /* section rules + icon-square borders */

  /* Status Colors */
  --color-error: #DC2626;           /* Red-600 */
  --color-success: #16A34A;         /* Green-600 */
  --color-warning: #F59E0B;         /* Amber-500 */

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  /* Font Families */
  --font-primary: 'Cairo', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
  --font-secondary: 'Lato', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
  --font-brand: 'xTools', 'Cairo', -apple-system, sans-serif;

  /* Font Sizes - Figma verified */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 36px;
  --font-size-4xl: 48px;
  --font-size-5xl: 64px;
  --font-size-hero: 80px;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights - Figma verified */
  --line-height-none: 1;
  --line-height-tight: 1.08;
  --line-height-snug: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.6;

  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  /* ========================================
     SPACING
     ======================================== */

  /* Spacing Scale */
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* ========================================
     LAYOUT (Figma verified)
     ======================================== */

  /* Container Widths - Figma verified */
  --container-sm: 800px;
  --container-md: 1000px;
  --container-lg: 1180px;           /* Figma: 1440px canvas, 130px margins */
  --container-xl: 1400px;

  /* Header/Navigation */
  --header-height: 72px;
  --header-height-mobile: 60px;

  /* Block Gap */
  --gap-block: 24px;

  /* ========================================
     BORDERS & RADIUS
     ======================================== */

  --border-width: 1px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-pill: 100px;      /* Figma: pill-shaped buttons */
  --border-radius-full: 9999px;

  /* ========================================
     SHADOWS
     ======================================== */

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 5%);
  --shadow-md: 0 4px 6px rgb(0 0 0 / 10%);
  --shadow-lg: 0 10px 15px rgb(0 0 0 / 10%);
  --shadow-xl: 0 20px 25px rgb(0 0 0 / 15%);

  /* ========================================
     TRANSITIONS
     ======================================== */

  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* ========================================
     Z-INDEX SCALE
     ======================================== */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;

  /* ========================================
     BREAKPOINTS (for reference in media queries)
     ======================================== */

  /*
   * Mobile: 0 - 767px
   * Tablet: 768px - 1023px
   * Desktop: 1024px - 1279px
   * Large: 1280px+
   *
   * Usage:
   * @media (min-width: 768px) { ... }
   * @media (min-width: 1024px) { ... }
   * @media (min-width: 1280px) { ... }
   */
}