/* ════════════════════════════════════════════════════════════════════════
   KARTA DESIGN TOKENS — the single source of truth for every Karta surface.

   Extracted from the /enter-karta landing ("B4 — karta as agent",
   landing-explorations/page-B4-chat.html, June 2026): a flat paper-white
   plane, hairline borders, one citron accent, near-black ink fills, and
   dark "terminal" islands for code. NO page-wide gradient washes — texture
   comes from hairlines and solid fills, never a gradient backdrop.

   This file is the ONE place brand values live. Every surface consumes it:

     • Dashboard (customer console)  — Tailwind utilities resolve through
       the palette triplets below (see config/tailwind.config.js).
     • Operator console (/admin)     — same light plane (flipped light June
       2026; the dark operator plane is retired).
     • Marketing site (karta.sh)     — app/assets/stylesheets/marketing.css
       aliases its local vars to these tokens.
     • Docs (docs.karta.sh, Mintlify)— apps/docs-site/style.css is GENERATED
       from this file via `task tokens:sync`; docs.json mirrors the colors.
     • Emails + error pages          — can't load CSS; they carry these
       values FROZEN as hex (see layouts/mailer.html.erb and public/*.html).

   Change a value here and it propagates everywhere (run `task tokens:sync`
   afterwards, and re-freeze the email/error-page hex to match).

   ── How colors are stored ────────────────────────────────────────────────
   Palette colors are stored as bare RGB CHANNEL TRIPLETS ("198 241 53"),
   not hex. That lets Tailwind opacity modifiers (bg-acid/40) and
   rgb(... / α) both work off one token. Use as: rgb(var(--karta-acid)/0.4).
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand: acid (THE Karta citron — the one accent) ────────────────── */
  --karta-acid:        198 241 53;   /* #c6f135 — fills, with ink text on top */
  --karta-acid-soft:   228 243 168;  /* #e4f3a8 — soft border on citron tints */
  --karta-acid-wash:   244 251 217;  /* #f4fbd9 — faint background tint       */
  --karta-acid-edge:   170 209 31;   /* #aad11f — hairline edge on acid fills */
  --karta-acid-deep:   155 199 10;   /* #9bc70a — accent marks / mono labels  */
  --karta-acid-ink:    58 74 5;      /* #3a4a05 — readable text ON acid fills */
  --karta-acid-readable: 95 115 32;  /* #5f7320 — readable accent text/links  */

  /* ── Brand: coal (the fixed near-black ink anchor) ──────────────────── */
  --karta-coal:        22 24 29;     /* #16181d — dark fills, buttons, CTA    */
  --karta-coal-800:    35 38 45;     /* #23262d — raised element on coal      */
  --karta-coal-900:    22 24 29;     /* #16181d */
  --karta-coal-950:    12 14 17;     /* #0c0e11 — terminal field              */

  /* ── Terminal island (dark product surfaces dropped into the page) ──── */
  --karta-term-bg:     12 14 17;     /* #0c0e11 — terminal background  */
  --karta-term-bg-2:   16 19 23;     /* #101317 — terminal title bar   */
  --karta-term-line:   29 34 40;     /* #1d2228 — hairline on terminal */
  --karta-term-ink:    205 211 218;  /* #cdd3da — terminal text        */
  --karta-term-dim:    107 118 129;  /* #6b7681 — muted terminal text  */

  /* ── Brand: mist (cool blue-gray support tint) ──────────────────────── */
  --karta-mist:        207 219 239;  /* #cfdbef */
  --karta-mist-soft:   236 241 248;  /* #ecf1f8 */
  --karta-mist-wash:   244 247 251;  /* #f4f7fb */
  --karta-mist-deep:   65 97 143;    /* #41618f */

  /* ── Brand: status hues ─────────────────────────────────────────────── */
  --karta-flame:       207 78 31;    /* #cf4e1f — danger / error      */
  --karta-ok:          43 182 115;   /* #2bb673 — success dot / fill  */
  --karta-ok-deep:     26 109 67;    /* #1a6d43 — readable success TEXT on light */
  --karta-ok-soft:     227 246 236;  /* #e3f6ec — success tint        */
  --karta-white:       255 255 255;

  /* Semantic accents (kept as their own names so a future dark surface
     can retune them without touching call sites). */
  --karta-danger:      207 78 31;    /* #cf4e1f */

  /* ── Neutral ramp ("ink") — inverted-semantic ───────────────────────────
     ink-100 = primary text (near-black), ink-950 = lightest well.
     Neutral, faintly cool — sits on flat white paper.                    */
  --karta-ink-100:     22 24 29;     /* #16181d — primary text   */
  --karta-ink-200:     66 70 79;     /* #42464f — secondary text */
  --karta-ink-300:     90 96 107;    /* #5a606b */
  --karta-ink-400:     105 110 119;  /* #696e77 — tertiary / meta TEXT (AA 4.5:1 on white) */
  --karta-ink-500:     111 116 125;  /* #6f747d — faintest readable TEXT / placeholders (AA on white) */
  --karta-ink-600:     194 198 207;  /* #c2c6cf */
  --karta-ink-700:     212 214 217;  /* #d4d6d9 */
  --karta-ink-800:     231 232 234;  /* #e7e8ea — hairline        */
  --karta-ink-850:     238 240 241;  /* #eef0f1 — soft hairline   */
  --karta-ink-900:     245 246 247;  /* #f5f6f7 — deep well       */
  --karta-ink-950:     250 251 251;  /* #fafbfb — well            */

  /* ── Semantic surface / text / line ──────────────────────────────────
     The page is flat white paper; depth comes from hairlines, wells
     (paper-2/3 = ink-950/900) and shadow, never a gradient.            */
  --karta-surface:        255 255 255;   /* #ffffff — page          */
  --karta-surface-card:   255 255 255;   /* card / panel fill       */
  --karta-surface-raised: 255 255 255;   /* solid popovers, menus   */
  --karta-stage:          238 240 243;   /* #eef0f3 — staging field behind floating panels */
  --karta-fg:             22 24 29;      /* primary text   */
  --karta-fg-dim:         66 70 79;      /* secondary text */
  --karta-fg-faint:       111 116 125;   /* #6f747d — muted text (AA 4.5:1 on white) */
  --karta-line:           231 232 234;   /* #e7e8ea — solid hairline */
  --karta-line-soft:      238 240 241;   /* #eef0f1 */

  /* ── Typography ─────────────────────────────────────────────────────── */
  --karta-font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --karta-font-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --karta-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --karta-tracking-tightest: -0.035em;   /* display headings */
  --karta-tracking-wide:     0.07em;     /* uppercase kickers / table heads */

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --karta-radius-pill: 999px;
  --karta-radius-xl:   1.25rem;    /* 20px — hero / CTA cards    */
  --karta-radius-card: 1rem;       /* 16px — cards, panels       */
  --karta-radius-md:   0.8125rem;  /* 13px — buttons, terminals  */
  --karta-radius-sm:   0.5rem;     /*  8px — chips, inline code  */

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --karta-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --karta-dur:         .15s;

  /* ── Elevation ──────────────────────────────────────────────────────── */
  --karta-shadow-card:  0 1px 2px rgb(20 24 33 / 0.04), 0 8px 28px -12px rgb(20 24 33 / 0.14);
  --karta-shadow-lift:  0 2px 4px rgb(11 13 15 / 0.04), 0 12px 24px -10px rgb(11 13 15 / 0.16), 0 40px 80px -30px rgb(11 13 15 / 0.28);
  --karta-shadow-pop:   0 30px 70px -20px rgb(11 13 15 / 0.40), 0 10px 28px -10px rgb(11 13 15 / 0.28);
  --karta-shadow-bar:   0 -1px 0 rgb(var(--karta-line)), 0 -12px 36px -24px rgb(20 24 33 / 0.18);
  --karta-glow-acid:    inset 0 1px 0 rgb(var(--karta-acid-edge)), 0 6px 20px -8px rgb(var(--karta-acid-deep) / 0.7);
}