/*
 * Henry design system color tokens — single source of truth for the
 * named brand palette. Tailwind utility classes (`bg-henry-card`,
 * `text-henry-fg`, etc.) resolve through these variables, so this
 * file MUST be loaded on every page that renders henry-* classes:
 *   - src/layouts/Layout.astro (app shell)
 *   - print pages that don't use the app shell
 *
 * Every variable declared here must have a matching entry in
 * `colorTokenNames` in src/design-system/tokens/colors.mjs so Tailwind
 * knows to emit a utility class for it. Hex values live here only.
 *
 * Org branding overrides individual variables inside a scoped stylesheet
 * without touching this file.
 *
 * Chart palette colors are NOT declared here — Recharts / Mapbox need
 * literal hex strings at JS load time, so the chart palette lives in
 * src/design-system/tokens/colors.mjs (`dataSeries`) instead.
 */

:root {
  /* ------------------------------------------------------------------
   * 2026 rebrand primitives — Kafe / Masala / Accent / Success ramps.
   * Source: "Henry AI - Colors" brand deck (June 2026).
   *
   * Job split (one ramp, one job):
   *   Masala = surfaces & structure (sidebars, canvas, dividers)
   *   Kafe   = interactive & brand  (primary actions, active states)
   *   Zinc   = text & neutrals      (use Tailwind's built-in zinc-*,
   *            which matches the brand Zinc ramp hex-for-hex)
   *   Accent = controlled contrast  (charts, semantic states, highlights)
   *
   * Docs: src/design-system/README.md
   * Legacy palette inventory: src/design-system/OLD-BRANDING.md
   * ------------------------------------------------------------------ */

  --kafe-100: #faf6f2;
  --kafe-200: #f0e6dc;
  --kafe-300: #e0c9b8;
  --kafe-400: #b2724c;
  --kafe-500: #994e2f;
  --kafe-700: #752f18;
  --kafe-900: #27140f;

  --masala-50: #f8f6f5;
  --masala-100: #ede8e5;
  --masala-200: #d6ccc2;
  --masala-300: #b8a99c;
  --masala-500: #8a7e74;
  --masala-700: #585046;
  --masala-800: #403831;
  --masala-900: #27201c;

  --accent-1: #6d957e; /* sage green — semantic: success */
  --accent-2: #8cc8c3; /* soft teal */
  --accent-3: #25c6c2; /* bright teal */
  --accent-4: #7f0106; /* deep red — semantic: error */
  --accent-5: #f73705; /* vivid orange-red */
  --accent-6: #fe8309; /* orange */
  --accent-7: #37417c; /* deep indigo */
  --accent-8: #758fe8; /* periwinkle blue */

  /* Accent Blue ramp — component-placement dropzones (Insert flow). 400 == accent-8. */
  --accent-blue-50: #f2f4fd;
  --accent-blue-100: #e9edfb;
  --accent-blue-200: #c2cef5;
  --accent-blue-300: #9baeee;
  --accent-blue-400: #758fe8;

  /* Accent Indigo ramp — comps/deck selection chrome (selected-row tint, panel
     badges, checkboxes, upload callout). Design-system AccentIndigo tokens. */
  --accent-indigo-50: #f0f6ff;
  --accent-indigo-100: #e2eaff;
  --accent-indigo-500: #5f6cac;
  --accent-indigo-600: #495593;
  --accent-indigo-700: #37417c;

  --success-light: #e7eeea;
  --success-full: #6d957e;
  --success-dark: #306948;

  /* ------------------------------------------------------------------
   * Semantic layer (pre-rebrand iteration). Values intentionally
   * unchanged — they will be re-pointed at the ramps above in a
   * dedicated visual-diff pass. New code may keep using these for
   * semantic roles; use the ramps above for new raw-color decisions.
   * ------------------------------------------------------------------ */

  --henry-bg: var(--kafe-100);
  --henry-card: #fbf8f4;
  --henry-card-hover: #f0e7dc;
  --henry-well: #ebe6e0;
  --henry-well-subtle: #ede8e5;
  --henry-well-faint: #f8f6f5;
  --henry-well-hover: #e3dcd3;

  /* Pure-white raised surface (step circles, Save & Exit, etc.) and the source
   * for the editor's --henry-card. Distinct from --henry-fg, which is text. */
  --henry-foreground: #ffffff;

  --henry-action-primary: var(--kafe-700);
  --henry-action-primary-active: var(--kafe-500);
  --henry-action-secondary: #ffffff;
  --neutral-action-primary: var(--masala-700);
  --neutral-action-primary-hover: var(--masala-900);
  /* TODO add other states for actions*/

  --henry-fg: #24211f;
  --henry-fg-muted: #5f574f;
  --henry-fg-subtle: #756d66;
  --henry-fg-faint: #9b9188;

  --henry-border: #e5d8ca;
  --henry-border-muted: #eee4da;
  --henry-border-strong: #d8c7b6;
  --henry-selection-border: #e3d2bf;

  --henry-accent: #752f18;
  --henry-accent-light: #b2724c;
  --henry-accent-hover: #5b2c16;
  --henry-accent-foreground: #ffffff;
  --henry-accent-bg: #f0e6dc;

  /* Primary actions are Masala (warm neutral); Kafe accent is reserved for brand moments. */
  --henry-primary: var(--masala-700);
  --henry-primary-hover: var(--masala-900);
  --henry-primary-foreground: var(--masala-50);

  --henry-danger: #a0442e;
  --henry-danger-bg: #fbe8e0;

  --henry-success: #1e3d2f;
  --henry-success-fg: #3d6b52;
  --henry-success-bg: #f4faf6;
  --henry-success-border: #c5ddd0;

  --henry-warning: #c45c12;
  --henry-warning-icon: #fe8309;
  --henry-warning-bg: #fff4e8;

  --henry-ring: #7a3b1e;

  --henry-skeleton: #e8e0d6;
  --henry-overlay: #24211f80;
  --henry-inverse: var(--masala-900);
  /* Generic dark-button hover (auth, profile, create-doc, editor). Not in staging
   * yet — keep global until promoted there; it is not editor-specific. */
  --henry-inverse-hover: var(--masala-700);
  --henry-inverse-fg: #f7f3ee;

  /* Zinc text ramp — literal hex, not var(--zinc-*): the brand Zinc scale has no
   * CSS-var tokens (it matches Tailwind's built-in zinc-* classes hex-for-hex). */
  --text-primary: #3f3f46; /* zinc-700 */
  --text-secondary: #71717a; /* zinc-500 */
  --text-tertiary: #a1a1aa; /* zinc-400 */
  --text-inverse: #ffffff;

  /* ------------------------------------------------------------------
   * Editor tokens — consumed only inside `.henry-editor` (the slide-editor
   * shell). The global henry-* values above are owned by the Henry Deal
   * experience (gated by ishenrydealenabledoverride) and must match staging,
   * so the editor's crisp-white surfaces and Kafe interactive states apply
   * via the scoped remap below and never leak into deal flows.
   * ------------------------------------------------------------------ */
  --henry-editor-bg: var(--masala-50);
  --henry-editor-surface-hover: #f5f5f5;
  --henry-editor-well: var(--masala-50);
  --henry-editor-well-hover: var(--masala-100);
  --henry-editor-accent-hover: var(--kafe-500);
  --henry-editor-ring: var(--kafe-500);
}

/* Slide-editor brand scope. The editor page renders `.henry-editor` on <body>
 * (Layout `bodyClass`, set in documents/edit.astro) so Radix portals — which mount
 * to <body> — inherit it. Only the tokens that diverge from the Henry Deal baseline
 * are remapped; everything else inherits the global henry-* values above. */
.henry-editor {
  --henry-bg: var(--henry-editor-bg);
  --henry-card: var(--henry-foreground);
  --henry-card-hover: var(--henry-editor-surface-hover);
  --henry-well: var(--henry-editor-well);
  --henry-well-hover: var(--henry-editor-well-hover);
  --henry-accent-hover: var(--henry-editor-accent-hover);
  --henry-ring: var(--henry-editor-ring);
}