/* mydevsolution design tokens — matches Brand Guide v2.0, section Website / Build tokens */
:root {
  --ink: #0D0D0D;
  --paper: #FFFFFF;
  --phosphor: #4AE370;   /* cursor + one accent per screen, dark surfaces only */
  --circuit: #12965A;    /* green on light surfaces: links, print */
  --gray-400: #8A8A8A;   /* metadata, captions, 18px+ on light */
  --gray-800: #2E2E2E;   /* rules and borders on ink */
  --font-sans: "Space Grotesk", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
  --space-1: 8px;  --space-2: 16px; --space-3: 24px;
  --space-4: 40px; --space-5: 64px; --space-6: 104px;
  --radius: 4px;
  --content-max: 1100px;
  --transition: 150ms;   /* the only allowed duration besides the blink */
}

/* The cursor. One per composition. */
.cursor {
  display: inline-block;
  width: 0.55em; height: 0.12em;
  margin-left: 0.25em;
  background: var(--phosphor);
  vertical-align: baseline;
  transform: translateY(-0.04em);
}
.cursor--blink { animation: blink 1s step-end infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* Static cursors (nav, headings) use .cursor alone; only the hero blinks. */

/* Links. Mono utility for nav and actions; prose links inherit surface rules. */
.link-mono {
  font-family: var(--font-mono);
  color: var(--phosphor);
  text-decoration: none;
  transition: opacity var(--transition);
}
.link-mono:hover { text-decoration: underline; }
.on-paper .link-mono, .link-mono--light { color: var(--circuit); text-decoration: underline; }

/* Keyboard focus is never suppressed. */
:focus-visible {
  outline: 2px solid var(--phosphor);
  outline-offset: 2px;
}
.on-paper :focus-visible { outline-color: var(--circuit); }

/* Reduced motion: the brand respects the visitor's setting. */
@media (prefers-reduced-motion: reduce) {
  .cursor--blink { animation: none; }
}