/* Design tokens: colors, type, spacing. */

@font-face {
  font-family: 'Inter';
  src: local('Inter'), local('Inter-Regular');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Bone + void carry the UI; signal-red marks one focal thing at a time. */
  --void:        #0a0908;   /* page background - not pure black, has warmth */
  --void-raised: #141210;   /* card/panel surface, one step up from void */
  --void-line:   #2a251d;   /* hairline borders, barely-there structure */
  --void-line-hi:#4a4438;   /* stronger borders, hover states */

  --bone:        #f4ede0;   /* primary text/foreground - warm off-white, not clinical */
  --bone-dim:    #a89f8f;   /* secondary text, descriptions */
  --bone-mute:   #5f584a;   /* tertiary text, metadata, timestamps */

  --signal:      #ff3d1a;   /* the one accent - alarm/rebellion red-orange */
  --signal-dim:  #7a2818;   /* signal at low intensity, for borders/washes */
  --signal-glow: rgba(255, 61, 26, 0.12);

  --success:     #6b9e5c;   /* used sparingly: "available", "downloaded" */
  --warn:        #d4a83a;   /* reserved, rarely used */

  /* Fracture (custom) for logo/display 32px+; Inter for everything else. */
  --font-display: 'Fracture', Impact, 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   1.2rem;   /* 12px - metadata, timestamps */
  --text-sm:   1.4rem;   /* 14px - secondary body, nav links */
  --text-base: 1.6rem;   /* 16px - body copy */
  --text-lg:   1.9rem;   /* 19px - card titles */
  --text-xl:   2.4rem;   /* 24px - section headers */
  --text-2xl:  3.6rem;   /* 36px - page titles */
  --text-3xl:  6rem;     /* 60px - display, small hero */
  --text-4xl:  9.6rem;   /* 96px - hero title */

  /* ---- Spacing: 8px base grid ---- */
  --sp-1: 0.8rem;
  --sp-2: 1.6rem;
  --sp-3: 2.4rem;
  --sp-4: 3.2rem;
  --sp-5: 4.8rem;
  --sp-6: 6.4rem;
  --sp-7: 9.6rem;

  /* No border-radius - square corners throughout, one exception below. */
  --radius: 0px;
  --radius-pill: 999px; /* the ONE exception - used only for the live/rank dot */

  --ease-snap:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sharp:   cubic-bezier(0.7, 0, 0.3, 1);
  --dur-fast:  120ms;
  --dur-base:  240ms;
  --dur-slow:  480ms;

  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
}

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

html { font-size: 62.5%; scrollbar-width: thin; scrollbar-color: var(--void-line-hi) var(--void); } /* 1rem = 10px base */

body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--signal); color: var(--void); }

/* Page scrollbar: slim and on-brand instead of the bulky OS default. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background-color: var(--void); }
::-webkit-scrollbar-thumb {
  background-color: var(--void-line-hi);
  border: 2px solid var(--void);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--signal); }

a { color: inherit; text-decoration: none; }

/* Focus states - visible, on-brand, never removed */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}