/* Spider Eyes Research — color tokens
   Dark-mode-forward, research-instrument palette.
   "Depth" = ink/near-black surfaces. "Opportunity" = signal chartreuse accent. */

:root {
  /* ---- Base ink scale (depth) ---- */
  --ink-0: #050607;   /* deepest recess — app chrome, page background */
  --ink-1: #0B0D0E;   /* base background */
  --ink-2: #131619;   /* raised surface (cards, panels) */
  --ink-3: #1B1F23;   /* raised surface, hover */
  --ink-4: #262B30;   /* borders, dividers on dark */
  --ink-5: #383F45;   /* stronger borders, disabled fills */

  /* ---- Paper / foreground scale ---- */
  --paper-0: #F4F2EC;  /* primary text on dark — warm off-white, not clinical white */
  --paper-1: #C7CBCC;  /* secondary text */
  --paper-2: #8A9296;  /* tertiary text, placeholders */
  --paper-3: #5B6469;  /* disabled text */

  /* ---- Light-mode surfaces (marketing/print contexts) ---- */
  --paper-bg: #F4F2EC;
  --paper-surface: #FFFFFF;
  --paper-border: #DEDBD1;
  --ink-on-paper: #14171A;
  --ink-on-paper-secondary: #565F63;

  /* ---- Signal accent (opportunity) ---- */
  --signal-100: #F4FBC9;
  --signal-300: #E2F27E;
  --signal-500: #CDEB3B;  /* primary accent — CTAs, highlights, the "glint" */
  --signal-600: #B4CC2E;
  --signal-700: #8A9A17;
  --signal-900: #4F5A0C;

  /* ---- Depth accent (secondary — data viz, links on dark) ---- */
  --depth-300: #6FD8C6;
  --depth-500: #2FB7A5;  /* teal — secondary series, links, focus rings on dark */
  --depth-700: #1C6E64;
  --depth-900: #103F3A;

  /* ---- Semantic ---- */
  --success-500: #3FBF7F;
  --success-700: #257A52;
  --warning-500: #E8A23D;
  --warning-700: #A66F22;
  --error-500: #E5484D;
  --error-700: #9C2C30;

  /* ---- Semantic aliases (use these in components) ---- */
  --bg-page: var(--ink-1);
  --bg-recessed: var(--ink-0);
  --bg-surface: var(--ink-2);
  --bg-surface-hover: var(--ink-3);
  --border-subtle: var(--ink-4);
  --border-strong: var(--ink-5);

  --text-primary: var(--paper-0);
  --text-secondary: var(--paper-1);
  --text-tertiary: var(--paper-2);
  --text-disabled: var(--paper-3);
  --text-on-signal: var(--ink-0);

  --accent-primary: var(--signal-500);
  --accent-primary-hover: var(--signal-300);
  --accent-primary-active: var(--signal-700);
  --accent-secondary: var(--depth-500);

  --focus-ring: var(--signal-500);
}