/* Copyright 2025 miniforge.ai
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* ============================================================================
   CSS Variables (Design Tokens)
   ============================================================================ */

:root {
  /* Colors */
  --color-background: #1e1e1e;
  --color-surface: #2d2d2d;
  --color-surface-elevated: #353535;
  --color-border: #3d3d3d;
  --color-text: #d4d4d4;
  --color-text-muted: #888888;
  --color-primary: #00d4ff;
  --color-success: #4ec9b0;
  --color-warning: #dcdcaa;
  --color-error: #f48771;
  --color-risk-high: #f48771;
  --color-risk-medium: #dcdcaa;
  --color-risk-low: #4ec9b0;

  /* Typography */
  --font-family: 'SF Mono', 'JetBrains Mono', 'Menlo', monospace;
  --font-size-base: 14px;
  --font-size-small: 12px;
  --font-size-large: 16px;
  --line-height: 1.6;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Borders */
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-width: 1px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   Reset & Base Styles
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  background: var(--color-background);
  color: var(--color-text);
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }

/* Gaps */
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* Margins */
.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* Padding */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Typography */
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-sm { font-size: var(--font-size-small); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-large); }
.font-bold { font-weight: 600; }

/* Backgrounds */
.bg-surface { background: var(--color-surface); }
.bg-surface-elevated { background: var(--color-surface-elevated); }

/* Borders */
.border { border: var(--border-width) solid var(--color-border); }
.border-b { border-bottom: var(--border-width) solid var(--color-border); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }

/* Display */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
