/*
 * Ghostrun Admin Portal - Client Design System Theme
 *
 * Re-themes the vendored platform design tokens to match the Ghostrun
 * client experience (ghostrun-canvas/client-app) exactly: a warm off-white
 * canvas, white elevated cards, a near-black neutral brand, and warm grays.
 *
 * This file is loaded AFTER layout.css/components.css so its values win over
 * both the default light palette and the dark palette. The selector explicitly
 * includes html.dark/html.light (which alpine-helpers.js toggles from the OS
 * preference) so the portal stays pinned to the client's light visual identity
 * on every OS theme.
 */

:root,
html.light,
html.dark {
  /* Typography - match the client's native system font stack */
  --font-family-sans: -apple-system, system-ui, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Base surfaces - warm canvas with white elevated cards */
  --color-background: #f4f3ee;
  --color-surface: #faf9f6;
  --color-surface-elevated: #ffffff;
  --color-surface-subtle: #efede8;

  /* Borders - warm neutral hairlines */
  --color-border: #e5e2dc;
  --color-border-subtle: #eeece8;
  --color-border-strong: #d6d3cc;

  /* Text - warm near-black down to muted */
  --color-text-primary: #1a1612;
  --color-text-secondary: #6b6560;
  --color-text-tertiary: #9b9590;
  --color-text-placeholder: #9b9590;
  --color-text-inverse: #ffffff;
  --color-text-inverse-secondary: rgba(255, 255, 255, 0.8);

  /* Brand - neutral near-black primary (client uses a dark, non-colored brand) */
  --color-brand: #1a1a1a;
  --color-brand-light: #3a3a3a;
  --color-brand-dark: #000000;
  --color-brand-darker: #000000;
  --color-brand-subtle: #f4f3ee;
  --color-brand-muted: #e5e2dc;

  /* Semantic - success */
  --color-success: #16a34a;
  --color-success-light: #22c55e;
  --color-success-dark: #15803d;
  --color-success-subtle: #f0fdf4;
  --color-success-muted: #bbf7d0;

  /* Semantic - warning */
  --color-warning: #d97706;
  --color-warning-light: #f59e0b;
  --color-warning-dark: #b45309;
  --color-warning-subtle: #fef3c7;
  --color-warning-muted: #fde68a;

  /* Semantic - error */
  --color-error: #dc2626;
  --color-error-light: #ef4444;
  --color-error-dark: #b91c1c;
  --color-error-subtle: #fef2f2;
  --color-error-muted: #fecaca;

  /* Semantic - info */
  --color-info: #0284c7;
  --color-info-light: #0ea5e9;
  --color-info-dark: #0369a1;
  --color-info-subtle: #e0f2fe;
  --color-info-muted: #bae6fd;

  /* Interactive states - warm hover/active */
  --color-hover: #efede8;
  --color-hover-strong: #e5e2dc;
  --color-active: #d6d3cc;
}

/* Ensure the warm canvas is applied even on views that do not set a body
   background inline (the app shell relies on the document background). */
body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
}