/* =============================================================================
 * Headless Platform Starter — Design Tokens
 * Single source of truth for the design system. Re-brand the platform by
 * editing the values below; components reference these custom properties only
 * and NEVER hardcode hex / timing / spacing values.
 *
 * Generated from site-output/design-direction.md (Operational Console direction).
 * ============================================================================= */

:root {
  /* ── Color palette (neutral, forkable) ───────────────────────────────────── */
  /*
   * --color-primary, --color-accent, --color-primary-soft, --color-on-primary
   * are the four "brand-scale" tokens. They are RE-INJECTED at runtime by the
   * root route from the operator-chosen `brandColor` in /admin/settings —
   * `app/lib/color.ts:derivePalette()` produces the same shape from any hex.
   * The values below are the fallback for when no operator setting exists yet;
   * keep them aligned to `DEFAULT_BRAND_COLOR` in `app/lib/color.ts`.
   */
  --color-primary: #2563eb; /* default brand — Tailwind blue-600 */
  --color-background: #f6f8fb; /* cool neutral app canvas */
  --color-accent: #2055ca; /* pressed state of primary (~14% darker) */
  --color-text: #172033; /* enterprise navy text */
  --color-muted: #66758d; /* secondary text, labels, metadata */
  --color-surface: #ffffff; /* panels, sidebar, tables, cards */
  --color-surface-soft: #f2f5f9; /* secondary blocks */
  --color-border: #dbe3ee; /* 1px hairline separators */
  --color-success: #0f7a50; /* ok state */
  --color-warning: #a86410; /* warnings, staging environment banner */
  --color-danger: #b42318; /* errors, destructive actions */
  --color-navy: #12345a; /* environment strip and high-emphasis chrome */

  /* Tints for soft status backgrounds (derived, kept as tokens) */
  --color-primary-soft: #e9effd;
  --color-success-soft: #ecfdf5;
  --color-warning-soft: #fff6e7;
  --color-danger-soft: #fff1f0;

  /* On-color text */
  --color-on-primary: #ffffff;

  /* ── Typography ──────────────────────────────────────────────────────────── */
  --font-display: "Space Grotesk", system-ui, sans-serif; /* titles, headings, KPI labels */
  --font-body: "Inter", system-ui, sans-serif; /* body, form, table content */
  --font-mono: "JetBrains Mono", ui-monospace, monospace; /* numbers, IDs, timestamps, audit */

  /* Type scale — ratio 1.2 (minor third), fluid with clamp() */
  --text-page-title: clamp(1.75rem, 2.6vw, 2.35rem);
  --text-h1: clamp(1.35rem, 1.9vw, 1.65rem);
  --text-h2: 1.25rem;
  --text-h3: 1.0625rem;
  --text-body: 0.9375rem;
  --text-small: 0.8125rem;
  --text-label-mono: 0.6875rem;

  --leading-display: 1.15;
  --leading-heading: 1.3;
  --leading-body: 1.5;
  --leading-table: 1.4;

  --tracking-display: 0;
  --tracking-body: 0;
  --tracking-label: 0.06em;

  /* ── Spacing scale — base unit 4px ───────────────────────────────────────── */
  --space-unit: 0.25rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Section padding rhythm (app, not marketing) */
  --space-section-compact: 1.5rem;
  --space-section-standard: 2rem;
  --space-section-generous: 3rem;

  /* ── Layout dimensions ───────────────────────────────────────────────────── */
  --sidebar-width: 292px;
  --sidebar-width-collapsed: 64px;
  --header-height: 64px;

  /* ── Radius — one constant value across the whole product ────────────────── */
  --radius: 0.5rem;

  /* ── Easing curves ───────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* state transitions, hover */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); /* panel/card entrance on mount */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* panel/dialog exit */

  /* ── Motion timing ───────────────────────────────────────────────────────── */
  --duration-micro: 140ms; /* hover/focus on row/card/button */
  --duration-state: 220ms; /* panels, collapsible, dialog */
  --duration-entrance: 300ms; /* section entrance on mount */
  --stagger-child: 50ms; /* stagger between entrance children */

  /* ── Elevation / depth — flat, one level on hover/overlay ────────────────── */
  --shadow-sm: 0 1px 2px rgb(23 32 51 / 0.05);
  --shadow-md: 0 10px 28px rgb(23 32 51 / 0.08);
  --shadow-lg: 0 24px 70px rgb(23 32 51 / 0.14);
}

/* Reduced-motion: collapse all motion to instant state changes. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro: 0ms;
    --duration-state: 0ms;
    --duration-entrance: 0ms;
    --stagger-child: 0ms;
  }
}