/* Constellation Design System - CSS Tokens */
/* Theme: NASA-Punk / Industrial Sci-Fi */

@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

:root {
  /* === BACKGROUNDS === */
  --deep-void: #0b0c10;
  --panel-grey: #1f2833;

  /* === PRIMARY UI === */
  --cyber-cyan: #66fcf1;
  --system-white: #c5c6c7;
  --dimmed-grey: #45a29e;

  /* === STATUS INDICATORS === */
  --alert-red: #ff2a2a;
  --ready-green: #2aff2a;
  --selection-orange: #ffa500;

  /* === TYPOGRAPHY === */
  --font-heading: "Rajdhani", sans-serif;
  --font-mono: "Space Mono", monospace;

  /* === SPACING (4px baseline grid) === */
  --grid-unit: 4px;
  --space-1: calc(var(--grid-unit) * 1); /* 4px */
  --space-2: calc(var(--grid-unit) * 2); /* 8px */
  --space-3: calc(var(--grid-unit) * 3); /* 12px */
  --space-4: calc(var(--grid-unit) * 4); /* 16px */
  --space-6: calc(var(--grid-unit) * 6); /* 24px */
  --space-8: calc(var(--grid-unit) * 8); /* 32px */
  --space-12: calc(var(--grid-unit) * 12); /* 48px */

  /* === BORDERS === */
  --border-standard: 1px solid var(--dimmed-grey);
  --border-active: 1px solid var(--cyber-cyan);

  /* === TRANSITIONS === */
  --transition-fast: 100ms ease;
  --transition-standard: 200ms ease;

  /* === CHAMFERED CORNERS === */
  --chamfer-small: 8px;
  --chamfer-medium: 12px;
  --chamfer-large: 16px;
}

/* === BASE RESET === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: 1.5;
}

body {
  font-family: var(--font-mono);
  background-color: var(--deep-void);
  color: var(--system-white);
  min-height: 100vh;
}

/* === TYPOGRAPHY CLASSES === */
.heading {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cyber-cyan);
}

.heading-1 {
  font-size: 2rem;
  font-weight: 700;
}

.heading-2 {
  font-size: 1.5rem;
  font-weight: 600;
}

.heading-3 {
  font-size: 1.25rem;
  font-weight: 500;
}

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

.mono-data {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--system-white);
}

.dimmed {
  color: var(--dimmed-grey);
}

/* === CHAMFERED CONTAINER === */
.chamfered {
  clip-path: polygon(
    var(--chamfer-medium) 0,
    100% 0,
    100% calc(100% - var(--chamfer-medium)),
    calc(100% - var(--chamfer-medium)) 100%,
    0 100%,
    0 var(--chamfer-medium)
  );
}

.chamfered-small {
  clip-path: polygon(
    var(--chamfer-small) 0,
    100% 0,
    100% calc(100% - var(--chamfer-small)),
    calc(100% - var(--chamfer-small)) 100%,
    0 100%,
    0 var(--chamfer-small)
  );
}

/* === PANEL === */
.panel {
  background-color: var(--panel-grey);
  border: var(--border-standard);
  padding: var(--space-4);
}

/* === UTILITY CLASSES === */
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

.mt-1 {
  margin-top: var(--space-1);
}
.mt-2 {
  margin-top: var(--space-2);
}
.mt-3 {
  margin-top: var(--space-3);
}
.mt-4 {
  margin-top: var(--space-4);
}
.mt-6 {
  margin-top: var(--space-6);
}
.mt-8 {
  margin-top: var(--space-8);
}

.mb-1 {
  margin-bottom: var(--space-1);
}
.mb-2 {
  margin-bottom: var(--space-2);
}
.mb-3 {
  margin-bottom: var(--space-3);
}
.mb-4 {
  margin-bottom: var(--space-4);
}

.p-2 {
  padding: var(--space-2);
}
.p-4 {
  padding: var(--space-4);
}
.p-6 {
  padding: var(--space-6);
}

/* === FLEX UTILITIES === */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-2 {
  gap: var(--space-2);
}
.gap-4 {
  gap: var(--space-4);
}