/*!
 * One-Person Software — brand tokens
 * One source of truth for color + spacing + type.
 * Usage:  <link rel="stylesheet" href="https://brand.dreytools.com/brand.css">
 */
:root {
  /* Color palette — warm dark + cyan */
  --ops-bg:       #0a0908;
  --ops-bg-1:     #14110e;
  --ops-bg-2:     #1c1815;
  --ops-bg-3:     #2a2420;

  --ops-line:     #2e2722;
  --ops-line-hot: #3a2e24;

  --ops-text:      #f5ead9;
  --ops-text-dim:  #b5a493;
  --ops-text-muted:#6b5d4f;

  /* Accents */
  --ops-cyan:      #22d3ee;
  --ops-cyan-dim:  #0891b2;
  --ops-amber:     #f59e0b;
  --ops-green:     #10b981;
  --ops-pink:      #ec4899;
  --ops-violet:    #a78bfa;
  --ops-red:       #ef4444;

  /* Type */
  --ops-font-sans: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --ops-font-mono: 'SF Mono', Menlo, ui-monospace, monospace;

  /* Safe-area insets */
  --ops-safe-top:    env(safe-area-inset-top);
  --ops-safe-bottom: env(safe-area-inset-bottom);
  --ops-safe-left:   env(safe-area-inset-left);
  --ops-safe-right:  env(safe-area-inset-right);

  /* Radii */
  --ops-r-sm:  6px;
  --ops-r-md:  10px;
  --ops-r-lg:  16px;
  --ops-r-xl:  20px;
  --ops-r-2xl: 24px;

  /* Transitions */
  --ops-t-fast: 0.15s ease;
  --ops-t-mid:  0.25s cubic-bezier(0.23, 1, 0.32, 1);
  --ops-t-slow: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Utility: cyan pulse dot (reusable brand mark) */
.ops-pulse {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ops-cyan);
  box-shadow: 0 0 12px var(--ops-cyan);
  animation: ops-pulse 2s ease-in-out infinite;
}
@keyframes ops-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}