/**
 * COTOAGA.AI Style Guide
 * Version: 1.0
 *
 * Klein Bottle duality: emerald green + electric blue
 * Mathematical precision: sharp edges, no curves
 * Typography: Inter, Space Grotesk, JetBrains Mono
 */

/* ==================== CSS CUSTOM PROPERTIES ==================== */

:root {
  /* Brand Colors - Klein Bottle Duality */
  --cotoaga-green: #00A86B;        /* Primary: emerald green */
  --cotoaga-blue: #0088FF;         /* Secondary: electric blue */
  --cotoaga-cyan: #00D4FF;         /* Accent: cyan */
  --cotoaga-black: #0A0A0A;        /* Pure black */
  --cotoaga-grey-dark: #2D2D2D;    /* Text color */
  --cotoaga-grey-medium: #666666;  /* Secondary text */
  --cotoaga-grey-light: #CCCCCC;   /* Borders */
  --cotoaga-white: #FAFAFA;        /* Background */

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', Courier, monospace;

  /* Font Sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 48px;

  /* Spacing - 8px base system */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Borders - Sharp edges only */
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-radius: 0;              /* NO CURVES - mathematical precision */

  /* Shadows - Subtle depth */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);

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

  /* Z-index layers */
  --z-base: 1;
  --z-overlay: 10;
  --z-controls: 20;
  --z-modal: 100;
}

/* ==================== BASE STYLES ==================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--cotoaga-grey-dark);
  background: var(--cotoaga-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--cotoaga-grey-dark);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

.text-mono {
  font-family: var(--font-mono);
}

.text-display {
  font-family: var(--font-display);
}

/* ==================== BUTTONS ==================== */

.gem-btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: white;
  background: var(--cotoaga-green);
  border: none;
  border-radius: var(--border-radius);  /* 0 - sharp edges */
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.gem-btn:hover {
  background: var(--cotoaga-blue);
  box-shadow: var(--shadow-md);
}

.gem-btn:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-sm);
}

.gem-btn:disabled {
  background: var(--cotoaga-grey-light);
  cursor: not-allowed;
  opacity: 0.5;
}

.gem-btn-secondary {
  background: var(--cotoaga-blue);
}

.gem-btn-secondary:hover {
  background: var(--cotoaga-cyan);
}

.gem-btn-outline {
  background: transparent;
  color: var(--cotoaga-green);
  border: var(--border-width-thick) solid var(--cotoaga-green);
}

.gem-btn-outline:hover {
  background: var(--cotoaga-green);
  color: white;
}

/* ==================== GEM CONTROLS ==================== */

.gem-controls {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(250, 250, 250, 0.95);
  border: var(--border-width) solid var(--cotoaga-grey-light);
  z-index: var(--z-controls);
}

.gem-controls-vertical {
  flex-direction: column;
}

.gem-controls-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

/* ==================== GEM VISUALIZATION ==================== */

.gem-visualization {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.gem-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==================== CONTAINERS ==================== */

.gem-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-md);
}

.gem-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.gem-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--cotoaga-grey-dark);
  margin-bottom: var(--space-sm);
}

.gem-description {
  font-size: var(--text-base);
  color: var(--cotoaga-grey-medium);
}

/* ==================== UTILITY CLASSES ==================== */

.hidden {
  display: none !important;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

/* ==================== RESPONSIVE - MOBILE STRATEGY ==================== */

@media (max-width: 768px) {
  /* Hide controls on mobile */
  .gem-controls {
    display: none;
  }

  /* Keep visualization interactive */
  .gem-visualization {
    width: 100%;
    height: 100vh;
    touch-action: pan-y pinch-zoom;
  }

  /* Adjust typography for mobile */
  :root {
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
  }

  /* Reduce spacing on mobile */
  .gem-container {
    padding: var(--space-sm);
  }

  .gem-header {
    margin-bottom: var(--space-md);
  }
}

/* ==================== GOOGLE FONTS PRECONNECT ==================== */
/* Add to HTML <head>:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
*/