/* ============================================================
   KeepRunning.ai — Design Tokens
   Two themes, one brand:
     [data-theme="dark"]  = Clean Slate  ("Pro" mode, for developers)
     [data-theme="light"] = Daybreak     ("Day" mode, for everyone)
   Constant across both: green = running/live, accent = interactive.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Type families ---- */
  --font-display: 'Inter Tight', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Radius ladder ---- */
  --radius-sm:   5px;
  --radius-md:   7px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  18px;
  --radius-full: 999px;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  160ms;
  --dur-base:  240ms;
  --dur-slow:  480ms;
}

/* ============================================================
   CLEAN SLATE — dark / "Pro"
   ============================================================ */
[data-theme="dark"] {
  --bg:            #0D1117;   /* page / editor canvas */
  --bg-deep:       #010409;   /* sidebar, terminal, deepest wells */
  --surface:       #161B22;   /* default card */
  --surface-2:     #1C2128;   /* elevated / hover / input */
  --border:        #21262D;   /* hairline */
  --border-strong: #30363D;   /* dividers under load, focus outlines */

  --text:        #E6EDF3;     /* primary */
  --text-muted:  #9DA7B3;     /* secondary */
  --text-faint:  #6E7681;     /* tertiary / placeholder */

  --accent:       #28E08A;    /* interactive / brand / links — the running green */
  --accent-hover: #57ECA7;
  --accent-soft:  rgba(40,224,138,0.16);
  --accent-fg:    #04130B;

  --run:       #28E08A;       /* running · live · success — same green, one signal */
  --run-soft:  rgba(40,224,138,0.16);
  --run-fg:    #04130B;
  --warn:      #D29922;  --warn-soft: rgba(210,153,34,0.16);
  --danger:    #F85149;  --danger-soft: rgba(248,81,73,0.15);

  /* syntax */
  --s-com:#8B949E; --s-kw:#FF7B72; --s-fn:#D2A8FF; --s-str:#A5D6FF; --s-num:#79C0FF; --s-var:#FFA657;

  /* terminal (dark base) */
  --terminal-bg: #010409;
  --term-text:  #E6EDF3;
  --term-muted: #768390;

  --shadow-soft: 0 1px 2px rgba(1,4,9,0.4);
  --shadow-card: 0 1px 2px rgba(1,4,9,0.4), 0 0 0 1px #21262D;
  --shadow-pop:  0 16px 40px -12px rgba(1,4,9,0.75), 0 0 0 1px #30363D;
  --shadow-glow: 0 0 34px -6px rgba(40,224,138,0.5);

  color-scheme: dark;
}

/* ============================================================
   DAYBREAK — light / "Day"
   ============================================================ */
[data-theme="light"] {
  --bg:            #FBFBF9;   /* warm off-white page */
  --bg-deep:       #F3F2ED;   /* sidebar / quiet wells */
  --surface:       #FFFFFF;   /* default card */
  --surface-2:     #F6F5F1;   /* hover / input / muted surface */
  --border:        #E5E3DC;   /* hairline */
  --border-strong: #D8D6CD;

  --text:        #1C1B2E;     /* primary */
  --text-muted:  #5A5870;     /* secondary */
  --text-faint:  #9A98A8;     /* tertiary / placeholder */

  --accent:       #0C9A5E;    /* same running green, deepened for contrast on white */
  --accent-hover: #0A8351;
  --accent-soft:  rgba(12,154,94,0.12);
  --accent-fg:    #FFFFFF;

  --run:       #0C9A5E;       /* running · live · success — same green, one signal */
  --run-soft:  rgba(12,154,94,0.12);
  --run-fg:    #FFFFFF;
  --warn:      #D97706;  --warn-soft: rgba(217,119,6,0.12);
  --danger:    #DC2626;  --danger-soft: rgba(220,38,38,0.10);

  /* syntax (light editor) */
  --s-com:#9A98A8; --s-kw:#7C3AED; --s-fn:#2563EB; --s-str:#0F9D6B; --s-num:#C2410C; --s-var:#1C1B2E;

  /* terminal stays dark even in Day mode (convention + contrast) */
  --terminal-bg: #1A1830;
  --term-text:  #CFCEE6;
  --term-muted: #9492B6;

  --shadow-soft: 0 1px 2px rgba(20,20,30,0.04);
  --shadow-card: 0 1px 2px rgba(20,20,30,0.05), 0 0 0 1px #E5E3DC;
  --shadow-pop:  0 16px 40px -12px rgba(20,20,30,0.18), 0 0 0 1px #E5E3DC;
  --shadow-glow: 0 0 32px -8px rgba(12,154,94,0.32);

  color-scheme: light;
}

/* ============================================================
   Base + type roles
   ============================================================ */
* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  font-feature-settings: 'cv11','ss01','ss03';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.kr-h1 { font-family: var(--font-display); font-weight: 700; font-size: 44px; letter-spacing: -0.035em; line-height: 1.02; color: var(--text); }
.kr-h2 { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.03em;  line-height: 1.08; color: var(--text); }
.kr-h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em;  line-height: 1.2;  color: var(--text); }
.kr-h4 { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em;  color: var(--text); }

.kr-body { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.kr-small { font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.kr-caption { font-size: 12px; line-height: 1.45; color: var(--text-faint); }

/* The signature label: mono, uppercase, wide tracking, paired with a status dot */
.kr-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-faint);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}

.kr-mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* The brand's only ornament: the running pulse */
.kr-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--run); flex: none; display: inline-block;
  box-shadow: 0 0 0 3px var(--run-soft);
}
.kr-dot--pulse { animation: kr-pulse 2.4s var(--ease-out) infinite; }
@keyframes kr-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .kr-dot--pulse { animation: none; } }