/* aTrackr Design System — Colors & Typography
   Nothing Design Language · rivnut/aTrackr
   -------------------------------------------------- */

/* ── Webfont registration ── */
@font-face {
  font-family: "Doto";
  src: url("fonts/Doto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Base tokens (dark mode — OLED default) ── */
:root {
  /* Surface */
  --black:           #000000;
  --surface:         #111111;
  --surface-raised:  #1A1A1A;
  --border:          #222222;
  --border-visible:  #333333;

  /* Text hierarchy */
  --text-disabled:   #666666;  /* 40% — timestamps, disabled */
  --text-secondary:  #999999;  /* 60% — labels, Space Mono caps */
  --text-primary:    #E8E8E8;  /* 90% — body text */
  --text-display:    #FFFFFF;  /* 100% — hero, headlines */

  /* Signal / status (identical across modes) */
  --accent:          #D71921;
  --accent-subtle:   rgba(215, 25, 33, 0.15);
  --success:         #4A9E5C;
  --warning:         #D4A843;
  --interactive:     #5B9BF6;

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

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out:   cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-micro: 150ms;
  --duration-transition: 300ms;

  /* Font stacks */
  --font-display: "Doto", "Space Mono", monospace;
  --font-body:    "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --font-mono:    "Space Mono", "JetBrains Mono", "SF Mono", monospace;
}

/* ── Light mode overrides ── */
@media (prefers-color-scheme: light) {
  :root {
    --black:          #F5F5F5;
    --surface:        #FFFFFF;
    --surface-raised: #F0F0F0;
    --border:         #E8E8E8;
    --border-visible: #CCCCCC;
    --text-disabled:  #999999;
    --text-secondary: #666666;
    --text-primary:   #1A1A1A;
    --text-display:   #000000;
    --interactive:    #007AFF;
  }
}

/* ── Light mode class override ── */
.light-mode {
  --black:          #F5F5F5;
  --surface:        #FFFFFF;
  --surface-raised: #F0F0F0;
  --border:         #E8E8E8;
  --border-visible: #CCCCCC;
  --text-disabled:  #999999;
  --text-secondary: #666666;
  --text-primary:   #1A1A1A;
  --text-display:   #000000;
  --interactive:    #007AFF;
}

/* ── Semantic type styles ── */

/* Display — Doto, 36px+, hero moments only */
.display-xl {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text-display);
}
.display-lg {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-display);
}
.display-md {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-display);
}

/* Headings — Space Grotesk */
.heading {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-display);
}
.subheading {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text-primary);
}

/* Body — Space Grotesk */
.body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-primary);
}
.body-sm {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}

/* Caption — Space Mono */
.caption {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* Label — Space Mono, ALL CAPS. The instrument panel label. */
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.label-sm {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-disabled);
}

/* Data values — Space Mono */
.data {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-primary);
}
.data-lg {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-display);
}

/* ── Dot-grid backgrounds ── */
.dot-grid {
  background-image: radial-gradient(circle, var(--border-visible) 1px, transparent 1px);
  background-size: 16px 16px;
}
.dot-grid-subtle {
  background-image: radial-gradient(circle, var(--border) 0.5px, transparent 0.5px);
  background-size: 12px 12px;
}

/* ── Utility classes ── */
.surface-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.surface-card-raised {
  background: var(--surface-raised);
  border: 1px solid var(--border-visible);
  border-radius: var(--radius-lg);
}
.divider {
  height: 1px;
  background: var(--border);
  width: 100%;
}
.divider-visible {
  height: 1px;
  background: var(--border-visible);
  width: 100%;
}