/* ============================================================
   brito.ai — Color tokens
   Official brand: a near-black cosmic foundation (Obsidian /
   Graphite / Midnight) + a locked spectrum accent
   (Solar · Coral · Violet · Cobalt · Cyan). Cobalt is the
   primary "blue". The system is DARK-FIRST; a light scope
   ([data-surface="light"]) flips the neutrals for cream/paper
   sections.
   ============================================================ */

:root {
  /* ---- Brand neutrals (named) ---- */
  --obsidian: #050505;   /* primary background */
  --graphite: #0a0a0a;   /* default surface */
  --midnight: #1a1f3a;   /* cosmic secondary surface */
  --cream:    #f6f3ea;   /* light surface */
  --paper:    #ffffff;   /* light ground */

  /* ---- Neutral ramp (dark -> light) ---- */
  --n-0:  #050505;
  --n-1:  #0a0a0a;
  --n-2:  #111115;
  --n-3:  #17181f;
  --n-4:  #1e2030;
  --n-5:  #2a2c3c;
  --n-6:  #3a3d50;
  --n-7:  #565a70;
  --n-8:  #7e8295;
  --n-9:  #a9adbd;
  --n-10: #cfd2dd;
  --n-11: #e7e8ee;
  --n-12: #f6f3ea;
  --n-13: #ffffff;

  /* ---- Spectrum (locked brand accent) ---- */
  --solar:  #FFB86B;
  --coral:  #FF5BA8;
  --violet: #B86BFF;
  --cobalt: #6B7BFF;
  --cyan:   #3BD4F7;

  /* Cobalt working scale (primary blue) */
  --cobalt-700: #4150d8;
  --cobalt-600: #5566f2;
  --cobalt-500: #6b7bff;
  --cobalt-400: #8a97ff;
  --cobalt-300: #aab4ff;
  --cobalt-soft: rgba(107, 123, 255, 0.14);
  --cobalt-line: rgba(107, 123, 255, 0.34);

  /* Warm (craft / personal accent) = Solar */
  --warm-500: #FFB86B;
  --warm-600: #f0a24c;
  --warm-soft: rgba(255, 184, 107, 0.14);

  /* ---- Status ---- */
  --success-500: #3dd68c;
  --success-soft: rgba(61, 214, 140, 0.14);
  --warning-500: #ffb86b;
  --warning-soft: rgba(255, 184, 107, 0.14);
  --danger-500:  #ff5b7a;
  --danger-soft: rgba(255, 91, 122, 0.14);

  /* =========================================================
     SEMANTIC ALIASES — DARK-FIRST
     ========================================================= */

  /* Surfaces */
  --bg:             var(--obsidian);
  --surface-1:      var(--graphite);   /* default card */
  --surface-2:      #111115;           /* raised / hover */
  --surface-3:      #17181f;           /* popover / elevated */
  --surface-cosmic: var(--midnight);   /* feature / hero surface */
  --surface-inverse: var(--cream);     /* light panel on dark */

  /* Text (on dark) */
  --text-strong:  #f5f6fa;
  --text-body:    #c9cbd6;
  --text-muted:   #8c8f9e;
  --text-faint:   #5a5d6c;
  --text-inverse: #0a0a0a;             /* on light surfaces */
  --text-accent:  var(--cobalt-400);

  /* Borders / hairlines */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Accent (cobalt blue) */
  --accent:       var(--cobalt-500);
  --accent-hover: var(--cobalt-400);
  --accent-press: var(--cobalt-600);
  --accent-soft:  var(--cobalt-soft);
  --accent-warm:  var(--warm-500);
  --on-accent:    #0a0a0a;             /* dark text on cobalt */

  /* Highlight (marker) */
  --highlight:      var(--cobalt-soft);
  --highlight-line: var(--cobalt);

  /* Focus */
  --focus-ring: var(--cobalt-400);
}

/* =========================================================
   LIGHT SURFACE SCOPE — cream / paper sections
   Apply data-surface="light" (or class .surface-light) to a
   container to flip neutrals; accent stays cobalt.
   ========================================================= */
[data-surface="light"],
.surface-light {
  --bg:             var(--cream);
  --surface-1:      var(--paper);
  --surface-2:      #f1ede2;
  --surface-3:      #ffffff;
  --surface-cosmic: #ece9df;
  --surface-inverse: var(--graphite);

  --text-strong:  #0a0a0a;
  --text-body:    #2a2c34;
  --text-muted:   #5c5f6c;
  --text-faint:   #8a8d98;
  --text-inverse: #f5f6fa;
  --text-accent:  var(--cobalt-700);

  --border-subtle: rgba(10, 10, 12, 0.07);
  --border-default: rgba(10, 10, 12, 0.12);
  --border-strong: rgba(10, 10, 12, 0.20);

  --highlight: rgba(107, 123, 255, 0.18);
}