/**
 * Editorial theme — warm paper-ink, single coral accent, flat depth.
 *
 * Usage: import AFTER application.css to fully replace Steel Blue tokens.
 *
 *   @import "components_pacer/application.css";
 *   @import "components_pacer/themes/editorial.css";
 *
 * Design language:
 *   paper + ink, JetBrains Mono overlines, hairline borders, zero shadows,
 *   2–4px radii (badges = 0), no hover transforms. Coral (#c5623a) is the
 *   only non-neutral. All semantic variants (success / warning / error /
 *   danger / info) collapse into either "neutral paper" or "coral warn" —
 *   there is no green, no red, no blue in this theme.
 *
 * Fonts:
 *   v0 pulls Inter + JetBrains Mono from Google Fonts. Follow-up is to
 *   self-host woff2 files under /app/assets/fonts/ and declare @font-face
 *   locally; swap the @import below for @font-face blocks. Enterprise
 *   consumers should do this before shipping.
 *
 * Kind-badge palette:
 *   Tokens below drive the ComponentsPacer::UI::KindBadge primitive (added
 *   in L2). Each kind has a fixed {bg, fg} pair; the badge reads
 *   --kind-{name}-bg / --kind-{name}-fg. Keep the palette list complete —
 *   a missing kind renders as inherited (looks like a bug).
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* --------------------------------------------------------------- */
  /* Editorial palette — canonical hex values from the hi-fi handoff  */
  /* --------------------------------------------------------------- */

  --mp-ink: #1a1a1a;
  --mp-paper: #fbfaf7;
  --mp-paper-alt: #f3efe6;
  --mp-line: #e3ddd0;
  --mp-line-soft: #ece7db;
  --mp-muted: #6b6660;
  --mp-muted-2: #8a857d;
  --mp-warn: #c5623a;
  --mp-warn-soft: #fbeadf;
  --mp-warn-line: #e8b79a;
  --mp-warn-text: #8b3a1c;
  --mp-ok-dot: #6ccf8e;
  --mp-amber-brown: #c9a64b;

  /* --------------------------------------------------------------- */
  /* Chrome + banner — product-shell tokens                           */
  /* --------------------------------------------------------------- */

  --color-chrome-bg: var(--mp-ink);
  --color-chrome-text: var(--mp-paper);
  --color-chrome-border: transparent;
  --color-banner-dot: var(--mp-ok-dot);
  --color-banner-dot-warn: var(--mp-warn);

  /* --------------------------------------------------------------- */
  /* Typography — Inter sans, JetBrains Mono mono                     */
  /* --------------------------------------------------------------- */

  --font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* --------------------------------------------------------------- */
  /* Radii — flat. Badges = 0. Status dots keep radius-full.          */
  /* --------------------------------------------------------------- */

  --radius-sm: 2px;
  --radius-base: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --radius-2xl: 4px;
  --radius-full: 9999px;
  --radius-badge: 0;

  /* --------------------------------------------------------------- */
  /* Depth — hairline borders instead of shadows                      */
  /* --------------------------------------------------------------- */

  --shadow-sm: none;
  --shadow-base: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-input: none;
  --shadow-input-focus-ring: 0 0 0 2px var(--mp-ink);
  --shadow-input-focus-ring-error: 0 0 0 2px var(--mp-warn);

  --elevation-flat: inset 0 0 0 1px var(--mp-line);
  --elevation-raised: none;
  --elevation-floating: none;
  --elevation-modal: none;

  /* --------------------------------------------------------------- */
  /* Interactive feedback — calm, no lift                             */
  /* --------------------------------------------------------------- */

  --hover-lift: none;
  --active-press: none;
  --focus-glow-width: 2px;
  --focus-glow-opacity: 1;

  /* --------------------------------------------------------------- */
  /* Surfaces, text, borders                                          */
  /* --------------------------------------------------------------- */

  --color-background: var(--mp-paper);
  --color-surface: var(--mp-paper);
  --color-surface-hover: var(--mp-paper-alt);
  --color-surface-active: var(--mp-paper-alt);
  --color-surface-muted: var(--mp-paper-alt);
  --color-surface-subtle: var(--mp-paper-alt);

  --color-text-primary: var(--mp-ink);
  --color-text-secondary: var(--mp-muted);
  --color-text-tertiary: var(--mp-muted-2);
  --color-text-disabled: var(--mp-muted-2);

  --color-border: var(--mp-line);
  --color-border-hover: var(--mp-ink);
  --color-border-focus: var(--mp-ink);
  --color-divider: var(--mp-line-soft);

  /* --------------------------------------------------------------- */
  /* Links — no blue; rely on underline and weight                    */
  /* --------------------------------------------------------------- */

  --color-link: var(--mp-ink);
  --color-link-hover: var(--mp-ink);
  --color-link-visited: var(--mp-muted);

  /* --------------------------------------------------------------- */
  /* Accent — coral is the only non-neutral                           */
  /* --------------------------------------------------------------- */

  --color-accent: var(--mp-warn);
  --color-accent-dark: var(--mp-warn);
  --color-accent-emphasis: var(--mp-warn);
  --color-accent-subtle: var(--mp-warn-soft);
  --color-accent-primary: var(--mp-warn);
  --color-accent-500: var(--mp-warn);

  /* --------------------------------------------------------------- */
  /* Buttons — ink primary, outlined secondary                        */
  /* --------------------------------------------------------------- */

  --color-button-primary-bg: var(--mp-ink);
  --color-button-primary-bg-hover: #000;
  --color-button-primary-bg-active: #000;
  --color-button-primary-text: var(--mp-paper);
  --color-button-primary-border: transparent;

  --color-button-secondary-bg: transparent;
  --color-button-secondary-bg-hover: var(--mp-paper-alt);
  --color-button-secondary-bg-active: var(--mp-paper-alt);
  --color-button-secondary-text: var(--mp-ink);
  --color-button-secondary-border: var(--mp-line);

  /* --------------------------------------------------------------- */
  /* Alerts — all semantic variants collapse.                         */
  /* success/warning/error/danger all read as coral; info as neutral. */
  /* --------------------------------------------------------------- */

  --color-alert-success-bg: var(--mp-paper-alt);
  --color-alert-success-border: var(--mp-line);
  --color-alert-warning-bg: var(--mp-warn-soft);
  --color-alert-warning-border: var(--mp-warn-line);
  --color-alert-error-bg: var(--mp-warn-soft);
  --color-alert-error-border: var(--mp-warn-line);
  --color-alert-info-bg: var(--mp-paper-alt);
  --color-alert-info-border: var(--mp-line);

  /* --------------------------------------------------------------- */
  /* Data viz — ink default; coral for warn/error                     */
  /* --------------------------------------------------------------- */

  --color-viz-primary: var(--mp-ink);
  --color-viz-success: var(--mp-ink);
  --color-viz-warning: var(--mp-warn);
  --color-viz-error: var(--mp-warn);
  --color-viz-accent: var(--mp-warn);

  /* --------------------------------------------------------------- */
  /* Focus ring                                                       */
  /* --------------------------------------------------------------- */

  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--mp-ink);

  /* --------------------------------------------------------------- */
  /* Backdrops, scrims                                                */
  /* --------------------------------------------------------------- */

  --color-backdrop: rgb(0 0 0 / 50%);
  --color-scrim: rgb(0 0 0 / 5%);

  /* --------------------------------------------------------------- */
  /* Form validation — coral, not red                                 */
  /* --------------------------------------------------------------- */

  --color-form-success-border: var(--mp-line);
  --color-form-success-bg: var(--mp-paper-alt);
  --color-form-error-border: var(--mp-warn-line);
  --color-form-error-bg: var(--mp-warn-soft);

  /* --------------------------------------------------------------- */
  /* Legacy Badge variants — collapsed.                               */
  /* Only `warning` and `error` carry coral; everything else reads     */
  /* neutral. Use KindBadge (L2) for the editorial taxonomy.          */
  /* --------------------------------------------------------------- */

  --color-badge-primary-bg: var(--mp-paper-alt);
  --color-badge-primary-text: var(--mp-ink);
  --color-badge-primary-ring: var(--mp-line);

  --color-badge-neutral-bg: var(--mp-paper-alt);
  --color-badge-neutral-text: var(--mp-ink);
  --color-badge-neutral-ring: var(--mp-line);

  --color-badge-success-bg: var(--mp-paper-alt);
  --color-badge-success-text: var(--mp-ink);
  --color-badge-success-ring: var(--mp-line);

  --color-badge-warning-bg: var(--mp-warn-soft);
  --color-badge-warning-text: var(--mp-warn-text);
  --color-badge-warning-ring: var(--mp-warn-line);

  --color-badge-error-bg: var(--mp-warn-soft);
  --color-badge-error-text: var(--mp-warn-text);
  --color-badge-error-ring: var(--mp-warn-line);

  --color-badge-info-bg: var(--mp-paper-alt);
  --color-badge-info-text: var(--mp-ink);
  --color-badge-info-ring: var(--mp-line);

  /* --------------------------------------------------------------- */
  /* KindBadge palette — fixed {bg, fg} pairs per kind.               */
  /* Consumed by ComponentsPacer::UI::KindBadge (added in L2).        */
  /* --------------------------------------------------------------- */

  --kind-invariant-bg: #d8d7a8;
  --kind-invariant-fg: #3a3a14;

  --kind-guideline-bg: #f4dc9b;
  --kind-guideline-fg: #584211;

  --kind-standard-bg: #e5e1d4;
  --kind-standard-fg: #3d3a30;

  --kind-path-bg: #2d4947;
  --kind-path-fg: #eaeae4;

  --kind-directive-bg: #1a1a1a;
  --kind-directive-fg: #fbfaf7;

  --kind-goal-bg: #3c4a4a;
  --kind-goal-fg: #e8e8e2;

  --kind-decision-bg: #3c4a4a;
  --kind-decision-fg: #e8e8e2;

  --kind-component-bg: #e5e1d4;
  --kind-component-fg: #3d3a30;

  --kind-dependency-bg: #e5e1d4;
  --kind-dependency-fg: #3d3a30;

  --kind-in-flight-bg: #d8d7a8;
  --kind-in-flight-fg: #3a3a14;

  --kind-active-bg: #d8d7a8;
  --kind-active-fg: #3a3a14;

  --kind-draft-bg: #f4dc9b;
  --kind-draft-fg: #584211;

  --kind-archive-bg: #e5e1d4;
  --kind-archive-fg: #3d3a30;

  --kind-closed-bg: #e5e1d4;
  --kind-closed-fg: #3d3a30;

  --kind-blocked-bg: var(--mp-warn-soft);
  --kind-blocked-fg: var(--mp-warn-text);
}

/* ---------------------------------------------------------------------
 * Dark-mode handling.
 *
 * v0 of the editorial theme ships light-only. A dark variant will land as
 * themes/dark.css (co-equal, not a media-query override) — see stub file.
 * Disable the system dark-mode flip for editorial so a user with OS dark
 * mode doesn't end up with a half-themed UI.
 * --------------------------------------------------------------------- */

:root {
  color-scheme: light;
}