/* ============================================================
   GitCafe — design tokens + base
   Nothing-inspired: monochrome canvas, dot-matrix display type,
   single red accent, hard edges, techy mono labels.
   Minimum font size across the app is 13px (readability floor).
   ============================================================ */

:root, [data-theme="dark"] {
  /* surfaces */
  --bg: #0a0a0a; --bg-2: #0f0f0f;
  --panel: #141414; --panel-2: #191919; --panel-3: #1f1f1f;
  --border: #262626; --border-strong: #333333;
  /* text — faint raised from #6a6a6a (~3.3:1) to meet WCAG AA on panels */
  --text: #ededed; --text-dim: #a3a3a3; --text-faint: #8a8a8a;
  /* accent + semantics */
  --accent: #f2453d; --accent-dim: rgba(242,69,61,0.14); --accent-2: #ff6a5f;
  --ok: #58c07a; --ok-dim: rgba(88,192,122,0.14);
  --warn: #d6b34a; --warn-dim: rgba(214,179,74,0.14);
  --info: #5b9bf5; --info-dim: rgba(91,155,245,0.14);
  --grid: #1c1c1c;
  --overlay: rgba(0,0,0,.62);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.45);
  --shadow-md: 0 12px 34px rgba(0,0,0,.35);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f2f1ee; --bg-2: #ecebe7;
  --panel: #ffffff; --panel-2: #faf9f7; --panel-3: #f2f1ed;
  --border: #e2e0da; --border-strong: #cfccc4;
  --text: #17150f; --text-dim: #57544b; --text-faint: #6d685d;
  --accent: #e5352c; --accent-dim: rgba(229,53,44,0.10); --accent-2: #c62b23;
  --ok: #2f9d57; --ok-dim: rgba(47,157,87,0.12);
  --warn: #a9821f; --warn-dim: rgba(169,130,31,0.12);
  --info: #2f6fd6; --info-dim: rgba(47,111,214,0.12);
  --grid: #e6e4df;
  --overlay: rgba(20,18,12,.42);
  --shadow-lg: 0 24px 60px rgba(30,26,18,.18);
  --shadow-md: 0 12px 34px rgba(30,26,18,.12);
  color-scheme: light;
}

:root {
  /* type */
  --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-dot: 'Doto', var(--font-mono);
  /* font sizes — smaller body text bumped +2px for readability (15px floor) */
  --fs-label: 15px;   /* mono eyebrow labels */
  --fs-sm: 15px;
  --fs-base: 16px;
  --fs-md: 17px;
  --fs-lg: 19px;
  /* radii — hard, techy */
  --r-1: 3px; --r-2: 4px; --r-3: 6px; --r-pill: 999px;
  /* spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  /* layout */
  --rail-w: 236px;
  --topbar-h: 56px;
  /* z */
  --z-rail: 40; --z-topbar: 30; --z-scrim: 35; --z-panel: 45; --z-modal: 70; --z-toast: 90;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font-family: inherit; font-size: var(--fs-base); color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }

/* enforce the 13px readability floor — nothing smaller renders */
[style*="font-size"] { }  /* inline sizes are audited in build; kit uses tokens */

::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }

/* keyframes */
@keyframes gc-pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes gc-blink { 50%{opacity:0} }
@keyframes gc-slide { from{transform:translateX(102%)} to{transform:translateX(0)} }
@keyframes gc-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes gc-in { from{opacity:0} to{opacity:1} }
@keyframes gc-toast { from{opacity:0;transform:translate(-50%,10px)} to{opacity:1;transform:translate(-50%,0)} }
@keyframes gc-pop { from{opacity:0;transform:translateY(6px) scale(.985)} to{opacity:1;transform:none} }
@keyframes gc-spin { to{transform:rotate(360deg)} }
@keyframes gc-dots { 0%{content:'.'} 33%{content:'..'} 66%{content:'...'} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}