/*
  Shared design tokens and components for the tools suite.
  Every page links this after its Google Fonts <link> and before its own
  <style> block. Pages with a .mobile-block div (or that otherwise use
  accent-dependent components) set their own --accent from the accent
  tokens below.

  Dark mode strategy: the landing page, Cue, and the timer are permanently
  dark by design. Ink (markdown-render) themes itself via
  html[data-theme="light"|"dark"], set before first paint from localStorage
  key "ink-theme" with a prefers-color-scheme fallback. If any other tool
  ever grows a second theme, reuse that mechanism.
*/

:root {
  /* Neutrals (dark shell) */
  --bg: #08080a;
  --surface: #111114;
  --surface-2: #1a1a1f;
  --border: #222228;
  --border-strong: #33333c;
  --text: #ffffff;
  --text-dim: #888890;
  --bg-deep: #000000; /* intentional true black: timer PiP and focus mode */

  /* Per-tool accents, matching the landing page's card system */
  --accent-green: #00ff88;  /* timer */
  --accent-rust: #c45c3e;   /* ink */
  --accent-purple: #a06cff; /* cue */

  /* Suite chrome typography (pages load the fonts themselves) */
  --font-display: 'Syne', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Radii */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-pill: 100px;

  /* Motion */
  --transition: 0.2s ease;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* "Not on the phone" overlay; pages include
   <div class="mobile-block">I don't want you using this on the phone</div> */
.mobile-block { display: none; }
@media (max-width: 600px) {
  .mobile-block {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--text);
    padding: 40px 28px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  .mobile-block::after {
    content: '';
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 16px var(--accent);
  }
  .mobile-block ~ * { display: none !important; }
}