/**
 * 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);

  /* Data colours (charts). Validated with the dataviz palette validator against
   * this surface and the dark one; the dark scope below re-steps them. Text
   * never wears these. See ADR-0054. */
  --viz-pdp: #3987e5;
  --viz-pdnp: #199e70;
  --viz-pud: #d95926;
  --viz-prob: #6250d6;
  --viz-oil: #008300;
  --viz-gas: #d63b3a;
  --viz-condensate: #2a78d6;
  --viz-casinghead: #b5179e;
  --viz-series: #2a78d6;
  --viz-forecast: #eb6834;
  --viz-neutral: #8a8f98;
  --viz-age-0: #0d366b; /* newest strip: most prominent */
  --viz-age-1: #256abf;
  --viz-age-2: #5598e7;
  --viz-age-3: #86b6ef;
  --viz-hollow: #ffffff; /* fill of an open marker */

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

  /* Type roles (comfortable). Tailwind's text-sm/xs/body/caption/heading/
   * title/page read these, so a density scope can remap them. See ADR-0053. */
  --text-sm: 0.875rem;
  --leading-sm: 1.25rem;
  --text-xs: 0.75rem;
  --leading-xs: 1rem;
  --text-heading: 1rem;
  --leading-heading: 1.5rem;
  --text-title: 1.25rem;
  --leading-title: 1.75rem;
  --text-page: 1.375rem;
  --leading-page: 2rem;
  /* Labels: form labels, stat labels, slider labels. */
  --text-label: 0.8125rem;
  --leading-label: 1.25rem;

  /* Spacing and surfaces (comfortable). */
  --gap: 1.5rem; /* between cards and page regions */
  --gap-sm: 1rem; /* between tiles in a grid */
  --card-px: 1.5rem;
  --card-py: 1.25rem;
  --card-head-py: 1rem;
  --card-foot-py: 0.75rem;
  --stat-px: 1.25rem;
  --stat-py: 1rem;
  --stat-value-mt: 0.375rem;
  --alert-px: 1rem;
  --alert-py: 0.75rem;
  --alert-icon: 1.25rem;
  --tab-px: 0.75rem;
  --tab-py: 0.75rem;
  --masthead-py: 1.25rem;
  --field-gap: 0.5rem;
  --page-px: 2rem;
  --page-py: 1.5rem;

  /* Charts. Unset here: a chart keeps its own natural height unless a density
   * scope sets one. JS charts read it with getComputedStyle. */
  --chart-h: none;
}

/*
 * Compact density. The global DensityToggle sets it on <html>; an analysis
 * screen sets it on its workspace root whatever the toggle says. Rows and
 * controls tighten at every width; type, spacing and charts tighten from 768px
 * up, so phones stay comfortable. Floors: no text under 11px, no hit target
 * under 24px. See ADR-0053 before loosening any of these.
 */
[data-density="compact"] {
  --row-py: 0.3125rem;
  --row-px: 0.625rem;
  --row-font: 0.75rem;
  --row-h: 1.75rem;
  --row-head-py: 0.375rem;
  --control-h: 2.125rem;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  [data-density="compact"] {
    --control-h: 1.75rem; /* 28px */
    --control-h-sm: 1.5rem; /* 24px: the WCAG 2.2 target floor */
    --control-px: 0.625rem;
    --control-px-sm: 0.5rem;
    --control-font-sm: 0.75rem;

    --text-sm: 0.8125rem; /* body 13px */
    --leading-sm: 1.125rem;
    --text-xs: 0.6875rem; /* caption 11px: the floor */
    --leading-xs: 1rem;
    --text-heading: 0.875rem;
    --leading-heading: 1.25rem;
    --text-title: 1.125rem;
    --leading-title: 1.5rem;
    --text-page: 1.125rem;
    --leading-page: 1.5rem;
    --text-label: 0.75rem; /* label 12px */
    --leading-label: 1rem;

    --gap: 0.5rem;
    --gap-sm: 0.5rem;
    --card-px: 0.75rem;
    --card-py: 0.625rem;
    --card-head-py: 0.5rem;
    --card-foot-py: 0.5rem;
    --stat-px: 0.75rem;
    --stat-py: 0.5rem;
    --stat-value-mt: 0.125rem;
    --alert-px: 0.75rem;
    --alert-py: 0.375rem;
    --alert-icon: 1rem;
    --tab-px: 0.625rem;
    --tab-py: 0.375rem;
    --masthead-py: 0.5rem;
    --field-gap: 0.25rem;
    --page-px: 1rem;
    --page-py: 0.5rem;

    --chart-h: 200px; /* 160-240px; a chart expands on request */
  }
  /* Unclassed text inside a scope takes the compact body size. */
  [data-density="compact"]:not(html) {
    font-size: var(--text-sm);
    line-height: 1.4;
  }
}

/*
 * Dark theme scope for the analysis workspaces (ADR-0054). A workspace root
 * sets data-theme from the shared preference (useWorkspaceTheme): "dark" pins
 * it, "auto" follows the system, "light" keeps :root. The light values above
 * are unchanged; dark tokens are defined only here.
 */
[data-theme="dark"] {
  --color-background: 2 6 23;
  --color-surface: 11 18 32;
  --color-surface-muted: 17 25 41;
  --color-surface-hover: 24 34 54;
  --color-foreground: 226 232 240;
  --color-muted: 148 163 184;
  --color-subtle: 100 116 139;
  --color-border: 30 41 59;
  --color-border-strong: 51 65 85;
  --color-primary: 106 145 200;
  --color-primary-hover: 159 189 224;
  --color-primary-foreground: 7 16 31;
  --color-primary-soft: 28 45 79;
  --color-accent: 211 176 146;
  --color-accent-hover: 226 200 177;
  --color-accent-foreground: 7 16 31;
  --color-accent-soft: 74 39 16;
  --color-success: 74 222 128;
  --color-success-soft: 20 54 36;
  --color-warning: 251 191 36;
  --color-warning-soft: 66 44 6;
  --color-danger: 248 113 113;
  --color-danger-soft: 69 20 20;
  --color-info: 96 165 250;
  --color-info-soft: 23 37 84;
  --color-neutral: 161 161 170;
  --color-neutral-soft: 39 39 42;
  --color-ring: 106 145 200;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.35);
  --shadow-pop: 0 12px 24px -4px rgb(0 0 0 / 0.55);
  --shadow-overlay: 0 24px 48px -12px rgb(0 0 0 / 0.6);
  /* Data colours stepped for the dark surface (validated, not flipped). */
  --viz-pdp: #3987e5;
  --viz-pdnp: #199e70;
  --viz-pud: #d95926;
  --viz-prob: #9085e9;
  --viz-oil: #008300;
  --viz-gas: #e66767;
  --viz-condensate: #3987e5;
  --viz-casinghead: #c040b8;
  --viz-series: #3987e5;
  --viz-forecast: #d95926;
  --viz-neutral: #8a8f98;
  --viz-age-0: #b7d3f6; /* newest: lightest on dark */
  --viz-age-1: #6da7ec;
  --viz-age-2: #2a78d6;
  --viz-age-3: #1c5cab;
  --viz-hollow: rgb(11 18 32);
  color-scheme: dark;
  color: rgb(var(--color-foreground));
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
  --color-background: 2 6 23;
  --color-surface: 11 18 32;
  --color-surface-muted: 17 25 41;
  --color-surface-hover: 24 34 54;
  --color-foreground: 226 232 240;
  --color-muted: 148 163 184;
  --color-subtle: 100 116 139;
  --color-border: 30 41 59;
  --color-border-strong: 51 65 85;
  --color-primary: 106 145 200;
  --color-primary-hover: 159 189 224;
  --color-primary-foreground: 7 16 31;
  --color-primary-soft: 28 45 79;
  --color-accent: 211 176 146;
  --color-accent-hover: 226 200 177;
  --color-accent-foreground: 7 16 31;
  --color-accent-soft: 74 39 16;
  --color-success: 74 222 128;
  --color-success-soft: 20 54 36;
  --color-warning: 251 191 36;
  --color-warning-soft: 66 44 6;
  --color-danger: 248 113 113;
  --color-danger-soft: 69 20 20;
  --color-info: 96 165 250;
  --color-info-soft: 23 37 84;
  --color-neutral: 161 161 170;
  --color-neutral-soft: 39 39 42;
  --color-ring: 106 145 200;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.35);
  --shadow-pop: 0 12px 24px -4px rgb(0 0 0 / 0.55);
  --shadow-overlay: 0 24px 48px -12px rgb(0 0 0 / 0.6);
  /* Data colours stepped for the dark surface (validated, not flipped). */
  --viz-pdp: #3987e5;
  --viz-pdnp: #199e70;
  --viz-pud: #d95926;
  --viz-prob: #9085e9;
  --viz-oil: #008300;
  --viz-gas: #e66767;
  --viz-condensate: #3987e5;
  --viz-casinghead: #c040b8;
  --viz-series: #3987e5;
  --viz-forecast: #d95926;
  --viz-neutral: #8a8f98;
  --viz-age-0: #b7d3f6; /* newest: lightest on dark */
  --viz-age-1: #6da7ec;
  --viz-age-2: #2a78d6;
  --viz-age-3: #1c5cab;
  --viz-hollow: rgb(11 18 32);
  color-scheme: dark;
  color: rgb(var(--color-foreground));
  }
}
/* Light is :root's values; scopes are not nested. */
[data-theme="light"] {
  color-scheme: light;
}

/*
 * 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: var(--text-sm);
  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;
  }
}

/*
 * Rich text frame. Wrap a Quill editor in `.rich-text-frame` to sit it flush
 * inside a Card: a quiet toolbar on surface-muted, no stock borders, Inter at
 * body size, and room to write. `:root` out-ranks quill.snow.css whatever the
 * load order. See ADR-0024; shown on /design under Forms.
 */
:root .rich-text-frame .ql-toolbar.ql-snow {
  border: 0;
  border-bottom: 1px solid rgb(var(--color-border) / 0.8);
  background: rgb(var(--color-surface-muted));
  padding: 0.375rem 1rem;
  font-family: var(--font-sans);
}
:root .rich-text-frame .ql-toolbar.ql-snow .ql-formats {
  margin-right: 0.75rem;
}
:root .rich-text-frame .ql-toolbar.ql-snow button {
  border-radius: 6px;
  transition: background-color 120ms cubic-bezier(0.2, 0, 0, 1);
}
:root .rich-text-frame .ql-toolbar.ql-snow button:hover {
  background: rgb(var(--color-surface-hover));
}
:root .rich-text-frame .ql-toolbar.ql-snow .ql-stroke {
  stroke: rgb(var(--color-muted));
}
:root .rich-text-frame .ql-toolbar.ql-snow .ql-fill {
  fill: rgb(var(--color-muted));
}
:root .rich-text-frame .ql-toolbar.ql-snow :is(button:hover, button.ql-active) .ql-stroke {
  stroke: rgb(var(--color-primary));
}
:root .rich-text-frame .ql-toolbar.ql-snow :is(button:hover, button.ql-active) .ql-fill {
  fill: rgb(var(--color-primary));
}
:root .rich-text-frame .ql-container.ql-snow {
  border: 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
:root .rich-text-frame .ql-editor {
  min-height: 26rem;
  padding: 1.5rem 1.75rem;
  line-height: 1.7;
  color: rgb(var(--color-foreground));
}
:root .rich-text-frame .ql-editor.ql-blank::before {
  left: 1.75rem;
  right: 1.75rem;
  font-style: normal;
  color: rgb(var(--color-subtle));
}
:root .rich-text-frame[data-compact] .ql-editor {
  min-height: 10rem;
}

/* Kit <Slider>: a 24px-tall hit area around a 6px visible track. Don't shrink
   the input back to the track height to look denser. See ADR-0053. */
.dm-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 1.5rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.dm-range:disabled {
  cursor: not-allowed;
}
.dm-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(to right, rgb(var(--color-primary)) var(--fill, 0%), rgb(var(--color-border-strong)) var(--fill, 0%));
}
.dm-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 9999px;
  border: 2px solid rgb(var(--color-primary));
  background: rgb(var(--color-surface));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
}
.dm-range::-moz-range-track {
  height: 6px;
  border-radius: 9999px;
  background: rgb(var(--color-border-strong));
}
.dm-range::-moz-range-progress {
  height: 6px;
  border-radius: 9999px;
  background: rgb(var(--color-primary));
}
.dm-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  border: 2px solid rgb(var(--color-primary));
  background: rgb(var(--color-surface));
}
.dm-range:focus-visible {
  outline: none;
}
.dm-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.35);
}
.dm-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.35);
}

/* Number inputs: no spin buttons (arrow keys still step); the unit sits in the
   control as a suffix. See the analysis field anatomy in STYLE_GUIDE.md. */
.dm-num {
  -moz-appearance: textfield;
  appearance: textfield;
}
.dm-num::-webkit-inner-spin-button,
.dm-num::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}