/* Dooley Wireframe Kit — color tokens.
   Grayscale ONLY. If a color appears in a wireframe, the wireframe is wrong. */

:root {
  /* Base ramp */
  --wf-white: #ffffff;
  --wf-gray-50: #fafafa;
  --wf-gray-100: #f2f2f2;
  --wf-gray-150: #ebebeb;
  --wf-gray-200: #e0e0e0;
  --wf-gray-300: #cccccc;
  --wf-gray-400: #adadad;
  --wf-gray-500: #8a8a8a;
  --wf-gray-600: #6b6b6b;
  --wf-gray-700: #4a4a4a;
  --wf-gray-800: #2e2e2e;
  --wf-gray-900: #1a1a1a;

  /* Surfaces */
  --wf-canvas: var(--wf-gray-100);      /* desk behind the page frame */
  --wf-surface: var(--wf-white);        /* the page itself */
  --wf-zone: var(--wf-gray-50);         /* labeled content zone fill */
  --wf-zone-alt: var(--wf-gray-150);    /* alternating / emphasized zone */
  --wf-media: var(--wf-gray-200);       /* image & video placeholder fill */

  /* Lines */
  --wf-line: var(--wf-gray-300);        /* default 1px rule */
  --wf-line-soft: var(--wf-gray-200);   /* hairlines, table rows */
  --wf-line-strong: var(--wf-gray-500); /* zone borders that must read at a glance */

  /* Ink */
  --wf-ink: var(--wf-gray-900);         /* real text: nav labels, CTAs, headings */
  --wf-ink-soft: var(--wf-gray-600);    /* secondary labels, captions */
  --wf-ink-muted: var(--wf-gray-500);   /* zone labels, meta */
  --wf-ink-faint: var(--wf-gray-400);   /* placeholder hints inside fields */

  /* Greeked text (fake body copy bars) */
  --wf-greek: var(--wf-gray-300);
  --wf-greek-soft: var(--wf-gray-200);

  /* Emphasis — wireframe "primary" is solid black, "secondary" is outlined */
  --wf-cta: var(--wf-gray-900);
  --wf-cta-ink: var(--wf-white);

  /* Annotation apparatus (the meta layer about the wireframe) */
  --wf-anno: var(--wf-gray-900);
  --wf-anno-ink: var(--wf-white);
}