/* ============================================================================
   Plotify — design tokens (theme-INDEPENDENT)
   "Precision instrument, quiet confidence." Dense but airy enterprise tool.
   These vars never change between themes. SACRED status colors live here and
   must never be overridden. See dev/finalplan/05-coding-rules.md (design lock).
   ============================================================================ */

:root {
  /* --- Typeface ---------------------------------------------------------- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono",
    Menlo, Consolas, monospace;

  /* --- SACRED status colors (NEVER override, NEVER hardcode elsewhere) ---- */
  --st-available: #16a34a;
  --st-sold: #dc2626;
  --st-reserved: #d97706;
  --st-booked: #d6642a;
  --st-hold: #94a3b8;
  --st-resale: #ea580c;
  --st-unknown: #71717a;
  --st-not-for-sale: #475569; /* neutral slate — distinct from hold/unknown */
  /* dimmer-than-muted, for placeholders/hints (theme --muted resolves at runtime) */
  --dim: color-mix(in srgb, var(--muted) 72%, transparent);

  /* --- Semantic color aliases (theme-independent feedback hues) -----------
     These are derived from sacred status hues but carry intent, not plot
     status. Use --danger/--success/--warning for UI feedback (toasts, badges,
     destructive buttons, form errors). They never change per theme so cross-
     theme contrast stays predictable. Per-theme surface/text come from themes/.
     --surface-alt is an alias of --surface-2 (hover/zebra) — provided so older
     markup referencing --surface-alt resolves to a real token, not a fallback. */
  --danger: var(--st-sold);
  --danger-strong: #b91c1c;
  --success: var(--st-available);
  --success-strong: #15803d;
  --warning: var(--st-reserved);
  --warning-strong: #b45309;
  --info: #2f6fe0;
  /* Brand accent. Themes redefine --accent (loaded after this file); this
     guaranteed fallback keeps `var(--accent)` resolving to the theme primary
     on any surface that omits it — never to a stray fixed blue/purple. */
  --accent: var(--primary);
  /* 12% tints on a neutral surface — used by feedback badges (.badge--*). */
  --tint-success: color-mix(in srgb, var(--success) 12%, transparent);
  --tint-warning: color-mix(in srgb, var(--warning) 16%, transparent);
  --tint-danger: color-mix(in srgb, var(--danger) 12%, transparent);
  --tint-info: color-mix(in srgb, var(--info) 12%, transparent);

  /* --- Spacing scale (4px base grid) ------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Layout constants */
  --page-pad: var(--space-4); /* 16px — compact console, no wasted top space */
  --card-pad: 18px; /* denser back-office feel (ref: 18px 20px) */
  --row-h: 38px; /* denser table rows (ref cell pad ≈ 13px) */
  --sidebar-w: 232px;
  --topbar-h: 54px;

  /* --- Radius ------------------------------------------------------------ */
  --r-xs: 4px;
  --r-sm: 6px; /* inputs, buttons */
  --r-md: 10px; /* cards */
  --r-lg: 14px; /* sheets, modals */
  --r-full: 9999px;

  /* --- Shadow (used sparingly: borders preferred) ------------------------ */
  --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06),
    0 1px 3px rgba(15, 23, 42, 0.05); /* popovers */
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1),
    0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.18),
    0 4px 12px rgba(15, 23, 42, 0.1); /* modals */
  --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.24);

  /* --- Typography scale -------------------------------------------------- */
  --fs-h1: 20px;
  --fs-h2: 16px;
  --fs-body: 14px;
  --fs-table: 13px;
  --fs-label: 12px;
  --fs-sm: 12px;
  --fs-xs: 11px;

  --lh-body: 1.5;
  --lh-tight: 1.25;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --track-label: 0.04em; /* uppercase labels */

  /* --- Motion ------------------------------------------------------------ */
  --dur-micro: 150ms; /* hover, focus, small */
  --dur-overlay: 250ms; /* slide-overs, modals */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Z-index scale -----------------------------------------------------
     One ordered ladder for the whole app. Each rung sits cleanly above the
     one below so chrome, overlays and feedback never z-fight:
       base content (auto) < sticky chrome < sidebar/bottom-tabs <
       scrim < drawer (mobile sidebar / slide-over) < modal < toast < tooltip
     The mobile sidebar drawer MUST be --z-drawer (above its --z-scrim) or the
     dimming scrim would paint over the open drawer. */
  --z-sticky: 10;   /* sticky table headers, topbar */
  --z-sidebar: 30;  /* desktop sidebar, mobile bottom-tabs */
  --z-popover: 35;  /* filter/tool dropdowns anchored to in-page controls */
  --z-scrim: 40;    /* dimming backdrop behind drawers/modals */
  --z-drawer: 45;   /* mobile sidebar slide-in (above its scrim) */
  --z-modal: 50;    /* slide-over + modal dialogs */
  --z-toast: 60;    /* toast notifications (above everything actionable) */
  --z-tooltip: 70;  /* tooltips, skip-link, dropdown popovers */
}

/* Base document rhythm */
html {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Honor user motion preference globally (a11y hard gate). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}