/* ============================================================
   Steven Neira — Big Data Engineer · Color tokens
   Extracted from visual_identity/design-system.md + the
   pixel-art "Big Data Engineer" world SVGs (pipes, blocks, screen).
   Two themes: dark (Terminal, default) + light (Off-white paper).
   ============================================================ */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* ---- Primitive palette (raw, do not use directly in UI) ---- */
  --blue-data: #3b89d3;        /* Mario "? block" blue / primary action  */
  --blue-deep: #2a5eab;        /* server-rack base blue from charactermain */
  --purple-dl: #9f89ea;        /* deep-learning purple accent             */
  --green-pipe: #81c339;       /* warp-pipe green / success               */
  --green-pipe-dark: #527e31;  /* pipe shadow green                       */
  --amber: #f8cb4b;            /* coin yellow / warning                   */
  --coral: #f99830;            /* error / alert orange                    */
  --skin: #ebb496;             /* character skin terracotta-peach         */

  --ink-950: #16161f;          /* deepest terminal / code background      */
  --ink-900: #1c1a20;          /* near-black                              */
  --ink-850: #22222d;          /* terminal dark — app background          */
  --ink-800: #2a2a37;          /* raised surface / card                   */
  --ink-700: #30303f;          /* elevated surface                        */
  --ink-600: #3a3a4a;          /* border                                  */
  --ink-500: #4a4a5f;          /* strong border                           */
  --paper-50: #fdfbf1;         /* off-white paper                         */
  --paper-100: #fffaf0;        /* raised paper                            */
  --paper-200: #f2f2f1;        /* sprite shadow off-white                 */

  /* ---- Semantic surfaces (dark theme) ---- */
  --color-bg: var(--ink-850);
  --color-bg-code: var(--ink-950);
  --color-surface: var(--ink-800);
  --color-surface-raised: var(--ink-700);
  --color-border: var(--ink-600);
  --color-border-strong: var(--ink-500);

  /* ---- Semantic text ---- */
  --text-primary: #e1dcd5;
  --text-secondary: #b7b2ad;
  --text-muted: #92909c;
  --text-disabled: #6a6973;
  --text-inverse: #16161f;
  --text-on-accent: #ffffff;

  /* ---- Brand / action ---- */
  --color-primary: var(--blue-data);
  --color-secondary: var(--purple-dl);
  --color-accent: var(--green-pipe);

  /* ---- Semantic status ---- */
  --color-success: var(--green-pipe);
  --color-warning: var(--amber);
  --color-error: var(--coral);
  --color-info: var(--blue-data);

  /* ---- Soft tint fills (badges, alert backgrounds, hover) ---- */
  --primary-soft: rgba(59, 137, 211, 0.18);
  --secondary-soft: rgba(159, 137, 234, 0.20);
  --success-soft: rgba(129, 195, 57, 0.18);
  --warning-soft: rgba(248, 203, 75, 0.18);
  --error-soft: rgba(249, 152, 48, 0.18);

  /* ---- Pixel-world decorative grid ---- */
  --surface-grid: rgba(225, 220, 213, 0.05);

  /* ---- Selection ---- */
  --selection-bg: var(--secondary-soft);
}

[data-theme="light"] {
  color-scheme: light;

  --color-bg: var(--paper-50);
  --color-bg-code: var(--ink-950);
  --color-surface: #ffffff;
  --color-surface-raised: var(--paper-100);
  --color-border: #e5e2dc;
  --color-border-strong: #d5d0c8;

  --text-primary: #1c1a20;
  --text-secondary: #5a5964;
  --text-muted: #777580;
  --text-disabled: #a19fa8;
  --text-inverse: #ffffff;
  --text-on-accent: #ffffff;

  --primary-soft: rgba(59, 137, 211, 0.12);
  --secondary-soft: rgba(159, 137, 234, 0.16);
  --success-soft: rgba(129, 195, 57, 0.16);
  --warning-soft: rgba(248, 203, 75, 0.18);
  --error-soft: rgba(249, 152, 48, 0.16);

  --surface-grid: rgba(28, 26, 32, 0.05);
  --selection-bg: var(--secondary-soft);
}