/**
 * DealMesh design tokens.
 *
 * This is the single source of truth for the redesigned CRM UI (owner + deals).
 * Every library component references the *semantic* Tailwind utilities that map
 * to these variables (e.g. `bg-surface`, `text-foreground`, `bg-primary`),
 * never raw palette values. To re-theme the product globally, edit the values
 * here -- nothing else needs to change.
 *
 * Color values are stored as space-separated RGB channels so Tailwind can apply
 * opacity modifiers via `rgb(var(--token) / <alpha-value>)`.
 */

:root {
  /* Surfaces & text */
  --color-background: 247 248 250; /* app canvas */
  --color-surface: 255 255 255; /* cards, panels */
  --color-surface-muted: 246 247 249; /* subtle fills, table headers */
  --color-surface-hover: 241 243 246; /* row / item hover */
  --color-foreground: 24 24 27; /* primary text */
  --color-muted: 100 105 115; /* secondary text */
  --color-subtle: 148 153 163; /* tertiary text, placeholders */
  --color-border: 226 228 233; /* hairlines */
  --color-border-strong: 203 207 214;

  /* Brand */
  --color-primary: 28 53 104; /* navy-700 */
  --color-primary-hover: 19 37 73; /* navy-800 */
  --color-primary-foreground: 255 255 255;
  --color-primary-soft: 229 237 248; /* navy-100 */

  --color-accent: 188 137 92; /* bronze-500 */
  --color-accent-hover: 152 104 62; /* bronze-600 */
  --color-accent-foreground: 255 255 255;
  --color-accent-soft: 244 236 228; /* bronze-100 */

  /* Sidebar (dark navy brand chrome).
   * Content stays on the light canvas above; the primary nav rail carries the
   * Perthshire brand's darker, navy-forward feel (echoing the marketing site)
   * with a bronze accent for active/brand moments. */
  --color-sidebar: 12 21 40; /* navy-900 */
  --color-sidebar-hover: 19 37 73; /* navy-800 */
  --color-sidebar-active: 28 53 104; /* navy-700 */
  --color-sidebar-foreground: 229 237 248; /* navy-100 */
  --color-sidebar-muted: 159 189 224; /* navy-300 */
  --color-sidebar-border: 19 37 73; /* navy-800 */

  /* Status */
  --color-success: 21 128 61;
  --color-success-soft: 220 252 231;
  --color-warning: 180 83 9;
  --color-warning-soft: 254 243 199;
  --color-danger: 185 28 28;
  --color-danger-soft: 254 226 226;
  --color-info: 37 99 235;
  --color-info-soft: 219 234 254;
  --color-neutral: 82 82 91;
  --color-neutral-soft: 244 244 245;

  /* Focus ring */
  --color-ring: 58 99 164; /* navy-500 */

  /* Type. One family everywhere (see ADR-0024). */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Radius: controls 8px, cards 12px, sheets 16px, pills full. */
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Elevation: 0 flat, 1 resting card, 2 raised/hover, 3 menus, 4 dialogs. */
  --shadow-card: 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow-raised: 0 1px 2px rgb(16 24 40 / 0.05), 0 4px 12px rgb(16 24 40 / 0.06);
  --shadow-pop: 0 4px 6px -2px rgb(16 24 40 / 0.05), 0 12px 24px -4px rgb(16 24 40 / 0.12);
  --shadow-overlay: 0 24px 48px -12px rgb(16 24 40 / 0.24);

  /* Motion. Short for state changes, medium for entering, long for panels.
   * Standard easing for most things, decelerate for entering, accelerate for leaving. */
  --duration-short: 120ms;
  --duration-medium: 200ms;
  --duration-long: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* Density (comfortable default). Toggled via [data-density="compact"]. */
  --row-py: 0.75rem;
  --row-px: 1rem;
  --row-font: 0.875rem;
  --row-h: 3rem;
  --control-h: 2.5rem;
}

[data-density="compact"] {
  --row-py: 0.4375rem;
  --row-px: 0.75rem;
  --row-font: 0.8125rem;
  --row-h: 2.25rem;
  --control-h: 2.125rem;
}

/*
 * Base. Semantic UI's global stylesheet sets html to 14px and the page font to
 * Lato, which shrinks every rem-based size by 12.5% and mixes four typefaces on
 * one screen. `:root` selectors out-rank its bare element rules regardless of
 * load order. See ADR-0024.
 */
html:root {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
:root body {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgb(var(--color-foreground));
  background: rgb(var(--color-background));
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:root :is(button, input, select, textarea, optgroup) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
:root :is(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
  line-height: 1.25;
  margin: 0;
}
/* Legacy Semantic UI widgets take the product face too; icon fonts are spared. */
.ui:not(i):not(.icon),
.ui :not(i):not(.icon):not([class*="icon"]) {
  font-family: var(--font-sans) !important;
}
:root ::selection {
  background: rgb(var(--color-primary) / 0.16);
}
:root :focus-visible {
  outline: 2px solid rgb(var(--color-ring));
  outline-offset: 2px;
}
:root table {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  :root *,
  :root *::before,
  :root *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}