/* Electric Matter — design tokens v1.1
   Consume these names, never the raw hexes. Dark is the default; light is served
   by prefers-color-scheme and can be forced with [data-em-theme]. */

:root {
  color-scheme: dark light;

  /* interface */
  --em-surface: #050505;
  --em-surface-raised: #0C0C0C;
  --em-border: #1B1B1B;
  --em-text-primary: #F2F2F0;
  --em-text-secondary: #8C8C88;
  --em-accent: #DCF48C;
  --em-accent-fg: #050505;
  --em-danger: #E8674A;

  /* grain ramp — belongs to the MARK, not the interface. Crown to base. */
  --em-grain-1: #DCF48C;
  --em-grain-2: #C0D97A;
  --em-grain-3: #A2B866;
  --em-grain-4: #879755;
  --em-grain-5: #6E6E68;

  /* type */
  --em-font-display: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --em-font-text: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --em-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* geometry — clear space and mark-to-word gap are 0.35x the mark's INK width */
  --em-mark-ratio: 0.35;
  --em-measure: 68ch;
}

@media (prefers-color-scheme: light) {
  :root {
    --em-surface: #FBFBF9;
    --em-surface-raised: #F2F2EE;
    --em-border: #E2E2DC;
    --em-text-primary: #14140F;
    --em-text-secondary: #5E5E57;
    --em-accent: #82913A;
    --em-accent-fg: #14140F;
    --em-danger: #C24328;

    --em-grain-1: #14140F;
    --em-grain-2: #34342E;
    --em-grain-3: #55554E;
    --em-grain-4: #78786F;
    --em-grain-5: #8E8E85;
  }
}

[data-em-theme="dark"] {
  --em-surface: #050505;
  --em-surface-raised: #0C0C0C;
  --em-border: #1B1B1B;
  --em-text-primary: #F2F2F0;
  --em-text-secondary: #8C8C88;
  --em-accent: #DCF48C;
  --em-accent-fg: #050505;
  --em-danger: #E8674A;
  --em-grain-1: #DCF48C;
  --em-grain-2: #C0D97A;
  --em-grain-3: #A2B866;
  --em-grain-4: #879755;
  --em-grain-5: #6E6E68;
}

[data-em-theme="light"] {
  --em-surface: #FBFBF9;
  --em-surface-raised: #F2F2EE;
  --em-border: #E2E2DC;
  --em-text-primary: #14140F;
  --em-text-secondary: #5E5E57;
  --em-accent: #82913A;
  --em-accent-fg: #14140F;
  --em-danger: #C24328;
  --em-grain-1: #14140F;
  --em-grain-2: #34342E;
  --em-grain-3: #55554E;
  --em-grain-4: #78786F;
  --em-grain-5: #8E8E85;
}

/* Colour proportion: roughly 90% surface / 8% ink / 2% accent.
   One accent element per view. The accent is never text on a light ground —
   on light it is a fill behind --em-accent-fg. Print carries no accent at all. */

/* Focus is the accent at 2px with a 2px offset, on every interactive element. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--em-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  /* Serve the static mark — never a shortened or slowed loop. */
  .em-mark-animated { display: none; }
  .em-mark-static { display: block; }
}