/* SVG Data URI Management System
 * Optimized SVGs as CSS custom properties for reusability and performance
 */

:root {
  /* ===== ICON SVGs AS DATA URI ===== */

  /* Simple geometric icons */
  --icon-arrow-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>');

  --icon-github: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>');

  --icon-email: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>');

  --icon-web: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>');

  --icon-calendar: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');

  --icon-clock: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>');

  --icon-location: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>');

  /* ===== DECORATIVE PATTERNS ===== */

  /* Hexagon pattern */
  --pattern-hex: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><polygon points="30,0 52,15 52,45 30,60 8,45 8,15" fill="none" stroke="rgba(0,212,255,0.2)" stroke-width="1"/></svg>');

  /* Circuit lines */
  --pattern-circuit: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><line x1="0" y1="10" x2="100" y2="10" stroke="rgba(59,130,246,0.3)" stroke-width="2"/><circle cx="25" cy="10" r="3" fill="rgba(59,130,246,0.5)"/><circle cx="75" cy="10" r="3" fill="rgba(59,130,246,0.5)"/></svg>');

  /* Data dots */
  --pattern-dots: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="2" fill="rgba(0,255,179,0.4)"/></svg>');
}

/* ===== UTILITY CLASSES FOR SVG ICONS ===== */

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-sm { width: 0.875em; height: 0.875em; }
.icon-lg { width: 1.25em; height: 1.25em; }
.icon-xl { width: 1.5em; height: 1.5em; }
.icon-2xl { width: 2em; height: 2em; }

/* Specific icon classes */
.icon-arrow-right { background-image: var(--icon-arrow-right); }
.icon-github { background-image: var(--icon-github); }
.icon-email { background-image: var(--icon-email); }
.icon-web { background-image: var(--icon-web); }
.icon-calendar { background-image: var(--icon-calendar); }
.icon-clock { background-image: var(--icon-clock); }
.icon-location { background-image: var(--icon-location); }

/* ===== PATTERN BACKGROUNDS ===== */

.bg-pattern-hex {
  background-image: var(--pattern-hex);
  background-size: 60px 60px;
}

.bg-pattern-circuit {
  background-image: var(--pattern-circuit);
  background-size: 100px 20px;
}

.bg-pattern-dots {
  background-image: var(--pattern-dots);
  background-size: 20px 20px;
}

/* ===== COLOR VARIATIONS ===== */

.icon-primary { filter: hue-rotate(0deg) brightness(1); }
.icon-secondary { filter: hue-rotate(45deg) brightness(0.8); }
.icon-accent { filter: hue-rotate(120deg) brightness(1.2); }

/* ===== ANIMATION HELPERS ===== */

.icon-rotate {
  animation: icon-spin 2s linear infinite;
}

.icon-pulse {
  animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes icon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===== RESPONSIVE ICON SIZES ===== */

@media (max-width: 768px) {
  .icon-responsive {
    width: 1.25em;
    height: 1.25em;
  }
}

@media (max-width: 480px) {
  .icon-responsive {
    width: 1em;
    height: 1em;
  }
}