/**
 * Riwar Design Tokens
 * Extracted from design system
 */

:root {
  /* === Typography === */
  --riwar-font-family: "Kalameh";
  /* "Kalameh", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; */

  /* Font Sizes */
  --riwar-font-size-xs: 0.75rem; /* 12px */
  --riwar-font-size-sm: 0.875rem; /* 14px */
  --riwar-font-size-base: 1rem; /* 16px */
  --riwar-font-size-lg: 1.125rem; /* 18px */
  --riwar-font-size-xl: 1.25rem; /* 20px */
  --riwar-font-size-2xl: 1.5rem; /* 24px */
  --riwar-font-size-3xl: 1.75rem; /* 28px */
  --riwar-font-size-4xl: 2rem; /* 32px */
  --riwar-font-size-5xl: 2.5rem; /* 40px */
  --riwar-font-size-6xl: 3rem; /* 48px */
  --riwar-font-size-7xl: 3.5rem; /* 56px */

  /* Line Heights */
  --riwar-line-height-tight: 1.25;
  --riwar-line-height-snug: 1.375;
  --riwar-line-height-base: 1.5;
  --riwar-line-height-relaxed: 1.625;
  --riwar-line-height-loose: 1.75;

  /* Font Weights */
  --riwar-font-thin: 100;
  --riwar-font-extralight: 200;
  --riwar-font-light: 300;
  --riwar-font-normal: 400;
  --riwar-font-medium: 500;
  --riwar-font-semibold: 600;
  --riwar-font-bold: 700;
  --riwar-font-extrabold: 800;
  --riwar-font-black: 900;

  /* === Breakpoints === */
  --riwar-breakpoint-sm: 576px;
  --riwar-breakpoint-md: 768px;
  --riwar-breakpoint-lg: 992px;
  --riwar-breakpoint-xl: 1200px;
  --riwar-breakpoint-xxl: 1400px;

  /* === Spacing Scale === */
  --riwar-spacing-0: 0;
  --riwar-spacing-1: 0.25rem; /* 4px */
  --riwar-spacing-2: 0.5rem; /* 8px */
  --riwar-spacing-3: 0.75rem; /* 12px */
  --riwar-spacing-4: 1rem; /* 16px */
  --riwar-spacing-5: 1.25rem; /* 20px */
  --riwar-spacing-6: 1.5rem; /* 24px */
  --riwar-spacing-7: 1.75rem; /* 28px */
  --riwar-spacing-8: 2rem; /* 32px */
  --riwar-spacing-9: 2.25rem; /* 36px */
  --riwar-spacing-10: 2.5rem; /* 40px */
  --riwar-spacing-11: 2.75rem; /* 44px */
  --riwar-spacing-12: 3rem; /* 48px */
  --riwar-spacing-14: 3.5rem; /* 56px */
  --riwar-spacing-16: 4rem; /* 64px */
  --riwar-spacing-20: 5rem; /* 80px */
  --riwar-spacing-24: 6rem; /* 96px */

  /* === Container Widths === */
  --riwar-container-sm: 540px;
  --riwar-container-md: 720px;
  --riwar-container-lg: 960px;
  --riwar-container-xl: 1140px;
  --riwar-container-xxl: 1320px;

  /* === Colors === */

  /* Background Colors */

  --riwar-site-bg:
    radial-gradient(
      circle at 50% -10%,
      rgba(126, 86, 226, 0.13),
      transparent 32rem
    ),
    radial-gradient(
      circle at 5% 50%,
      rgba(71, 210, 178, 0.07),
      transparent 28rem
    ),
    linear-gradient(180deg, #faf9fd 0%, #f3f0f8 72%, #f8f7fb 100%);
  --riwar-color-bg: #050505;
  --riwar-color-bg-alt: #ffffff;
  --riwar-color-surface-light: #ffffff;
  --riwar-color-surface-dark: #1a1a1f;
  --riwar-color-surface-dark-alt: #252530;

  /* Text Colors */
  --riwar-color-text: #777083;
  --riwar-color-text-dark: #18181b;
  --riwar-color-text-dark-secondary: #3f3f46;
  --riwar-color-text-muted: #71717a;
  --riwar-color-text-light: #ffffff;
  --riwar-color-text-light-secondary: #a1a1aa;
  --riwar-color-text-light-muted: #9ca3af;

  /* Brand Colors */
  --riwar-color-primary: #8b5cf6;
  --riwar-color-primary-hover: #7c3aed;
  --riwar-color-primary-light: #a78bfa;
  --riwar-color-primary-dark: #6d28d9;

  --riwar-color-secondary: #6366f1;
  --riwar-color-secondary-hover: #4f46e5;

  /* Accent Colors */
  --riwar-color-blue: #3b82f6;
  --riwar-color-blue-hover: #2563eb;
  --riwar-color-blue-light: #60a5fa;

  --riwar-color-red: #ef4444;
  --riwar-color-red-hover: #dc2626;
  --riwar-color-red-light: #f87171;

  --riwar-color-pink: #f43f5e;
  --riwar-color-pink-hover: #e11d48;

  --riwar-color-orange: #f97316;
  --riwar-color-orange-hover: #ea580c;

  --riwar-color-green: #10b981;
  --riwar-color-green-hover: #059669;
  --riwar-color-green-light: #34d399;
  --riwar-color-green-extralight: #4bcda912;

  --riwar-color-spotify: #1db954;
  --riwar-color-spotify-hover: #1aa34a;

  --riwar-color-cyan: #06b6d4;
  --riwar-color-cyan-hover: #0891b2;

  --riwar-color-teal: #14b8a6;
  --riwar-color-teal-hover: #0d9488;

  /* State Colors */
  --riwar-color-success: #10b981;
  --riwar-color-warning: #f59e0b;
  --riwar-color-danger: #ef4444;
  --riwar-color-info: #3b82f6;

  /* Border Colors */
  --riwar-color-border-extralight: #48336717;
  --riwar-color-border-light: #e5e7eb;
  --riwar-color-border: #d1d5db;
  --riwar-color-border-dark: #9ca3af;
  --riwar-color-border-on-dark: rgba(255, 255, 255, 0.1);

  /* Overlay */
  --riwar-color-overlay: rgba(0, 0, 0, 0.5);
  --riwar-color-overlay-light: rgba(0, 0, 0, 0.3);
  --riwar-color-overlay-heavy: rgba(0, 0, 0, 0.7);

  /* === Gradients === */
  --riwar-gradient-purple-blue: linear-gradient(
    135deg,
    #8b5cf6 0%,
    #3b82f6 100%
  );
  --riwar-gradient-red-pink: linear-gradient(135deg, #ef4444 0%, #f43f5e 100%);
  --riwar-gradient-green-teal: linear-gradient(
    135deg,
    #10b981 0%,
    #14b8a6 100%
  );
  --riwar-gradient-orange-yellow: linear-gradient(
    135deg,
    #f97316 0%,
    #fbbf24 100%
  );
  --riwar-gradient-blue-cyan: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
  --riwar-gradient-dark: linear-gradient(135deg, #1a1a1f 0%, #252530 100%);

  /* === Border Radius === */
  --riwar-radius-xs: 0.25rem; /* 4px */
  --riwar-radius-sm: 0.375rem; /* 6px */
  --riwar-radius-md: 0.5rem; /* 8px */
  --riwar-radius-lg: 0.75rem; /* 12px */
  --riwar-radius-xl: 1rem; /* 16px */
  --riwar-radius-2xl: 1.25rem; /* 20px */
  --riwar-radius-3xl: 1.5rem; /* 24px */
  --riwar-radius-4xl: 1.75rem; /* 24px */
  --riwar-radius-5xl: 2rem; /* 24px */
  --riwar-radius-full: 9999px;

  /* === Shadows === */
  --riwar-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --riwar-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --riwar-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --riwar-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --riwar-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.16);
  --riwar-shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.2);

  /* Colored Shadows */
  --riwar-shadow-purple: 0 8px 24px rgba(139, 92, 246, 0.3);
  --riwar-shadow-blue: 0 8px 24px rgba(59, 130, 246, 0.3);
  --riwar-shadow-red: 0 8px 24px rgba(239, 68, 68, 0.3);
  --riwar-shadow-green: 0 8px 24px rgba(16, 185, 129, 0.3);

  /* === Transitions === */
  --riwar-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --riwar-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --riwar-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --riwar-transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* === Z-Index Scale === */
  --riwar-z-base: 0;
  --riwar-z-dropdown: 1000;
  --riwar-z-sticky: 1020;
  --riwar-z-fixed: 1030;
  --riwar-z-modal-backdrop: 1040;
  --riwar-z-modal: 1050;
  --riwar-z-popover: 1060;
  --riwar-z-tooltip: 1070;

  /* === Grid === */
  --riwar-grid-columns: 12;
  --riwar-grid-gap: var(--riwar-spacing-4);
  --riwar-grid-gap-sm: var(--riwar-spacing-2);
  --riwar-grid-gap-lg: var(--riwar-spacing-6);
}

/* === Section Spacing Utility Classes === */
.riwar-section--spacing-top-none {
  padding-block-start: 0;
}
.riwar-section--spacing-top-small {
  padding-block-start: var(--riwar-spacing-6);
}
.riwar-section--spacing-top-medium {
  padding-block-start: var(--riwar-spacing-12);
}
.riwar-section--spacing-top-large {
  padding-block-start: var(--riwar-spacing-16);
}

.riwar-section--spacing-bottom-none {
  padding-block-end: 0;
}
.riwar-section--spacing-bottom-small {
  padding-block-end: var(--riwar-spacing-6);
}
.riwar-section--spacing-bottom-medium {
  padding-block-end: var(--riwar-spacing-12);
}
.riwar-section--spacing-bottom-large {
  padding-block-end: var(--riwar-spacing-16);
}

/* === Responsive Typography === */
@media (max-width: 767px) {
  :root {
    --riwar-font-size-4xl: 1.75rem; /* 28px on mobile */
    --riwar-font-size-5xl: 2rem; /* 32px on mobile */
    --riwar-font-size-6xl: 2.25rem; /* 36px on mobile */
    --riwar-font-size-7xl: 2.5rem; /* 40px on mobile */
  }
}