/* ═══════════════════════════════════════════════════════════════════════════
   QUANTUM TRADER — Layout Primitives
   Container, Grid, Stack, Flex — all consume design token spacing/radii.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Container ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--bp-2xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* Narrow container for reading / forms */
.container-narrow {
  max-width: var(--bp-lg);
}

/* Wide container — full bleed */
.container-fluid {
  max-width: 100%;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* ─── Grid Primitives ────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--space-6);
}

/* Column variants — consumed heavily across every page */
.grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.grid-6  { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-6); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); }

/* Auto-fill grid — responsive without media queries */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

.grid-auto-sm {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

/* Grid gap overrides */
.gap-0  { gap: var(--space-0); }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

/* ─── Stack (vertical layout with consistent spacing) ──── */
.stack {
  display: flex;
  flex-direction: column;
}

.stack-xs { display: flex; flex-direction: column; gap: var(--space-1); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-md { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }
.stack-xl { display: flex; flex-direction: column; gap: var(--space-8); }

/* ─── Flex Primitives ────────────────────────────────────── */
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

/* Alignment */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

/* Flex grow/shrink */
.flex-1   { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.shrink-0 { flex-shrink: 0; }
.grow     { flex-grow: 1; }

/* ─── Card Primitive ──────────────────────────────────────── */
.card {
  background-color: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: background-color var(--duration-normal) var(--easing-in-out),
              border-color var(--duration-normal) var(--easing-in-out),
              box-shadow var(--duration-normal) var(--easing-in-out);
}

.card:hover {
  background-color: var(--theme-surface-hover);
}

.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  background-color: var(--theme-surface-hover);
  border-color: var(--color-primary-700);
  box-shadow: var(--shadow-md);
}

.card-sm {
  padding: var(--space-3);
}

.card-lg {
  padding: var(--space-8);
}

.card-flush {
  padding: 0;
}

/* ─── Divider ──────────────────────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--theme-border);
  border: none;
  margin: var(--space-4) 0;
}

.divider-vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  background-color: var(--theme-border);
}

/* ─── Visually Hidden (accessible) ──────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Aspect Ratio Box ──────────────────────────────────── */
.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-chart {
  aspect-ratio: 21 / 9;
}