/* ==========================================
   CSS Custom Properties (Variables)
   Shared across Blog, Release, and all pages
   ========================================== */

:root {
  /* Color Palette */
  --color-primary: #219897;
  --color-primary-hover: #1a7a76;
  --color-primary-light: #e8f4f3;
  --color-secondary: #111;
  --color-secondary-hover: #000;
  --color-text: #1c1c1c;
  --color-text-muted: #868686;
  --color-text-light: #666;
  --color-bg: #fff;
  --color-bg-muted: #f8f8f8;
  --color-bg-dark: #1c1c1c;
  --color-border: #e8e8e8;
  --color-border-light: #dee2e6;
  --color-white: #fff;
  --color-black: #000;
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-shadow-medium: rgba(0, 0, 0, 0.15);
  --color-shadow-dark: rgba(0, 0, 0, 0.25);

  /* Social Colors */
  --color-twitter: #1da1f2;
  --color-facebook: #3b5999;
  --color-whatsapp: #25d366;
  --color-telegram: #0088cc;
  --color-x: #000000;

  /* Typography */
  --font-family-base: 'JL UIkit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-heading: 'JL UIkit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 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: 2rem;      /* 32px */
  --font-size-4xl: 2.5rem;    /* 40px */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;

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

  /* Container */
  --container-max: 1200px;
  --container-padding: 1.5rem;
  --content-max: 800px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  --radius-pill: 500px;

  /* Shadows */
  --shadow-xs: 0 1px 2px var(--color-shadow);
  --shadow-sm: 0 1px 3px var(--color-shadow);
  --shadow-md: 0 4px 6px var(--color-shadow);
  --shadow-lg: 0 10px 15px var(--color-shadow-medium);
  --shadow-xl: 0 20px 25px var(--color-shadow-medium);
  --shadow-2xl: 0 25px 50px var(--color-shadow-dark);
  --shadow-inner: inset 0 2px 4px var(--color-shadow);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Z-Index Scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* Audio Player Specific */
  --player-bg: rgba(0, 0, 0, 0.03);
  --player-radius: 5px;
  --player-shadow: 0 0.5rem 3rem #000;
  --player-accent: var(--color-primary);
  --player-accent-hover: var(--color-primary-hover);
  --player-text: var(--color-text);
  --player-text-muted: var(--color-text-muted);
  --player-border: var(--color-border);
  --player-progress-bg: var(--color-border);
  --player-progress-fill: var(--color-primary);
  --player-button-bg: rgba(0, 0, 0, 0.55);
  --player-button-hover: rgba(0, 0, 0, 0.7);
  --player-button-text: #fff;

  /* Grid Gutter */
  --grid-gutter: 30px;
  --grid-gutter-sm: 15px;
  --grid-gutter-lg: 40px;

  /* Header/Navigation */
  --header-height: 80px;
  --header-bg: var(--color-white);
  --header-border: var(--color-border);

  /* Footer */
  --footer-bg: var(--color-bg-dark);
  --footer-text: var(--color-white);
  --footer-text-muted: rgba(255, 255, 255, 0.7);

  /* Buttons */
  --btn-padding-x: 1.5rem;
  --btn-padding-y: 0.75rem;
  --btn-radius: var(--radius-md);
  --btn-font-weight: var(--font-weight-semibold);
  --btn-transition: var(--transition-base);

  /* Cards */
  --card-bg: var(--color-white);
  --card-border: var(--color-border);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --card-padding: var(--space-4);

  /* Forms */
  --input-height: 2.5rem;
  --input-padding-x: 0.75rem;
  --input-padding-y: 0.375rem;
  --input-bg: var(--color-white);
  --input-border: var(--color-border);
  --input-radius: var(--radius-md);
  --input-focus-border: var(--color-primary);
  --input-focus-shadow: 0 0 0 0.25rem var(--color-primary-light);

  /* Video/Embed */
  --video-aspect-ratio: 16 / 9;
  --video-border-radius: var(--radius-md);
  --video-bg: #000;

  /* Social Share */
  --social-btn-size: 36px;
  --social-btn-radius: 50%;
  --social-btn-transition: var(--transition-fast);
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e8e8e8;
    --color-text-muted: #a0a0a0;
    --color-bg: #1c1c1c;
    --color-bg-muted: #282828;
    --color-border: #383838;
    --color-bg-muted: #282828;
    --color-border: #444;
    --player-bg: rgba(255, 255, 255, 0.05);
    --player-border: #444;
    --player-progress-bg: #444;
    --card-bg: #282828;
    --card-border: #444;
    --input-bg: #282828;
    --input-border: #444;
    --footer-bg: #111;
  }
}

/* Utility Classes using Variables */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-light { color: var(--color-text-light); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-muted { background-color: var(--color-bg-muted); }
.bg-dark { background-color: var(--color-bg-dark); }

.border-primary { border-color: var(--color-primary); }
.border-muted { border-color: var(--color-border); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 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;
  }
}