/* ============================================================
   COLORS — Balto
   Four core colors: two neutrals (Paper, Ink) do the heavy lifting;
   two accents (Co-Balt-o Blue, Berry) used with intent.
   Scales generated in HSL: 100 lightest → 900 darkest.
   The tagged step is the true brand color.
   ============================================================ */
:root {
  /* --- Paper (warm off-white neutral · base = 100) --- */
  --paper-100: #FAFAF8; /* BASE — primary background */
  --paper-200: #EAEAE1;
  --paper-300: #D5D5C3;
  --paper-400: #BBBBA0;
  --paper-500: #9E9E76;
  --paper-600: #7D7D59;
  --paper-700: #5F5F44;
  --paper-800: #454531;
  --paper-900: #2D2D20;

  /* --- Ink (near-black neutral · base = 900) --- */
  --ink-100: #F5F5F5;
  --ink-200: #E6E6E6;
  --ink-300: #CCCCCC;
  --ink-400: #ADADAD;
  --ink-500: #8A8A8A;
  --ink-600: #6B6B6B;
  --ink-700: #525252;
  --ink-800: #3B3B3B;
  --ink-900: #1E1E1E; /* BASE — primary text & foreground */

  /* --- Co-Balt-o Blue (primary accent · base = 700) --- */
  --blue-100: #eceeff;
  --blue-200: #dee2f9;
  --blue-300: #c3caf9;
  --blue-400: #9aa5f6;
  --blue-500: #7482f2;
  --blue-600: #5f70f0;
  --blue-700: #4d63fe; /* BASE — signature brand color */
  --blue-800: #3b4fe6;
  --blue-900: #3a4fe0;

  /* --- Berry (sub-accent · base = 600) --- */
  --berry-100: #F8F1F2;
  --berry-200: #EFDCDE;
  --berry-300: #DEBABD;
  --berry-400: #CB9096;
  --berry-500: #B45F68;
  --berry-600: #4d63fe; /* BASE — editorial warmth */
  --berry-700: #6F343A;
  --berry-800: #50262A;
  --berry-900: #34181B;

  /* --- Pure white (used for cards / reversed logo) --- */
  --white: #FFFFFF;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product work.
     ============================================================ */
  /* Surfaces */
  --surface-page: var(--paper-100);   /* default canvas */
  --surface-card: var(--white);       /* raised cards sit slightly brighter than Paper */
  --surface-raised: var(--white);
  --surface-sunken: var(--paper-200);
  --surface-inverse: var(--ink-900);

  /* Text & foreground */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-inverse: var(--paper-100);
  --text-on-accent: var(--paper-100);

  /* Accent / brand */
  --brand: var(--blue-700);
  --brand-hover: var(--blue-800);   /* hover = one step darker */
  --brand-active: var(--blue-900);  /* press = darkest */
  --brand-subtle: var(--blue-100);  /* tinted backgrounds, selected states */
  --sub-accent: var(--berry-600);
  --sub-accent-subtle: var(--berry-100);

  /* AI / Balto AI — a purple sparkle marks AI-generated content in-product
     (badges, "Generated by Balto AI", the ✨ glyph). This is the one place
     purple appears; reserve it for AI, never general decoration. */
  --ai: #7C4DEF;
  --ai-strong: #6A38E0;
  --ai-subtle: #EEE9FE;
  --ai-on: var(--paper-100);


  /* Links */
  --link: var(--blue-700);
  --link-hover: var(--blue-800);

  /* Borders & dividers */
  --border: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus: var(--blue-500);

  /* Focus ring */
  --ring: color-mix(in srgb, var(--blue-500) 45%, transparent);

  /* ============================================================
     DATA VISUALIZATION — categorical palette (product charts).
     Transcribed from Balto's Trends & Insights charts. Use in order;
     these are the only place many colors appear together. Chart 1 is
     the lead series (brand-adjacent). Not for UI chrome.
     ============================================================ */
  --chart-1: #E9B23C; /* gold */
  --chart-2: #2FB6A6; /* teal */
  --chart-3: #EA5F4D; /* coral */
  --chart-4: #4C6FE0; /* blue */
  --chart-5: #2E9E5B; /* green */
  --chart-6: #8B5CF6; /* purple */
  --chart-7: #F2A9C4; /* pink */
  --chart-8: #F0913E; /* orange */
}