/* ============================================================
   Rent.rv.ua — design tokens
   Three layers: primitives → semantic → component.
   Components read only semantic/component tokens, so a theme
   is changed by overriding a handful of variables on :root
   (or <html data-theme="…">).

   Customisation knobs (the only values a theme normally touches):
     --brand-seed     action colour; the whole brand scale is derived
     --header-seed    app-bar colour
     --radius-scale   multiplies every corner radius (0 = square)
     --font-display / --font-ui
   Derived values are resolved on :root, so override the knobs on
   :root / html, not on a nested element.
   ============================================================ */

:root {
  /* ---------- Knobs ---------- */
  --brand-seed: #475ffa;
  --header-seed: #243d81;
  --radius-scale: 1;
  --font-display: 'Onest', 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* ============================================================
     1. PRIMITIVES
     ============================================================ */

  /* Neutral — one scale instead of the 17 greys found in Figma */
  --neutral-0: #ffffff;
  --neutral-25: #f9fafb;
  --neutral-50: #f3f5f8;
  --neutral-100: #eceff3;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5dc;
  --neutral-400: #9ca3af;
  --neutral-500: #6a7282;
  --neutral-600: #5b646f;
  --neutral-700: #374151;
  --neutral-800: #1d2433;
  --neutral-900: #0f171f;

  /* Brand — derived from --brand-seed (Figma #475ffa) */
  --brand-50: color-mix(in oklch, var(--brand-seed) 6%, white);
  --brand-100: color-mix(in oklch, var(--brand-seed) 11%, white);
  --brand-200: color-mix(in oklch, var(--brand-seed) 26%, white);
  --brand-300: color-mix(in oklch, var(--brand-seed) 45%, white);
  --brand-400: color-mix(in oklch, var(--brand-seed) 72%, white);
  --brand-500: var(--brand-seed);
  --brand-600: color-mix(in oklch, var(--brand-seed) 86%, black);
  --brand-700: color-mix(in oklch, var(--brand-seed) 72%, black);
  --brand-800: color-mix(in oklch, var(--brand-seed) 58%, black);
  --brand-900: color-mix(in oklch, var(--brand-seed) 38%, black);

  /* Navy — app bar and dark panels (from Trading) */
  --navy-500: var(--header-seed);
  --navy-600: color-mix(in oklch, var(--header-seed) 80%, black);
  --navy-900: #0f153c;

  /* Status */
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-500: #00a63e;
  --green-700: #008236;
  --red-50: #fef2f2;
  --red-100: #ffe2e2;
  --red-400: #fb2c36;
  --red-500: #e7000b;
  --red-700: #c10007;
  --amber-50: #fffbeb;
  --amber-100: #fef3c6;
  --amber-500: #fe9a00;
  --amber-700: #b45309;
  --blue-500: #1c69e3; /* info accent from the Figma dashboard */

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

  /* Radius — 12 Figma values consolidated into 7 */
  --radius-xs: calc(4px * var(--radius-scale));
  --radius-sm: calc(6px * var(--radius-scale));
  --radius-md: calc(10px * var(--radius-scale));
  --radius-lg: calc(12px * var(--radius-scale));
  --radius-xl: calc(16px * var(--radius-scale));
  --radius-2xl: calc(20px * var(--radius-scale));
  --radius-pill: 999px;

  /* Type — weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Type — fluid sizes, mobile 375 → desktop 1440 */
  --fs-display: clamp(1.375rem, 1.243rem + 0.563vw, 1.75rem); /* 22 → 28 */
  --fs-h2: clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem); /* 18 → 20 */
  --fs-h3: clamp(1rem, 0.956rem + 0.188vw, 1.125rem); /* 16 → 18 */
  --fs-num-xl: clamp(1.25rem, 1.074rem + 0.751vw, 1.75rem); /* 20 → 28 */
  --fs-lg: 1rem; /* 16 — buttons, inputs (≥16 stops iOS zoom) */
  --fs-md: 0.875rem; /* 14 — body */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-xs: 0.75rem; /* 12 */
  --fs-2xs: 0.6875rem; /* 11 — table overline */

  --lh-tight: 1.28;
  --lh-snug: 1.375;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-wide: 0.02em;

  /* Motion */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Breakpoints (reference only — CSS media queries can't read vars)
     mobile < 768 · tablet 768–1279 · desktop ≥ 1280 */
  --bp-tablet: 768px;
  --bp-desktop: 1280px;

  /* ============================================================
     2. SEMANTIC
     ============================================================ */

  /* Surfaces */
  --color-bg-page: var(--neutral-25);
  --color-surface: var(--neutral-0);
  --color-surface-muted: var(--neutral-50);
  --color-surface-sunken: var(--neutral-100);
  --color-overlay: rgb(15 21 60 / 0.42);

  /* Text */
  --color-text: var(--neutral-900);
  --color-text-secondary: var(--neutral-600);
  --color-text-tertiary: var(--neutral-500);
  --color-text-placeholder: var(--neutral-400);
  --color-text-label: var(--neutral-700);
  --color-text-inverse: #ffffff;
  --color-text-link: var(--brand-500);

  /* Borders */
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-border-subtle: color-mix(in oklch, var(--neutral-200) 55%, transparent);

  /* Action (single blue — decision 2026-10-30) */
  --color-action: var(--brand-500);
  --color-action-hover: var(--brand-600);
  --color-action-active: var(--brand-700);
  --color-action-subtle: var(--brand-100);
  --color-action-subtle-hover: var(--brand-200);
  --color-action-subtle-text: var(--brand-800);
  --color-action-ghost: var(--brand-50);
  --color-focus: var(--brand-500);
  --color-focus-ring: color-mix(in oklch, var(--brand-500) 28%, transparent);
  --color-selection: color-mix(in oklch, var(--brand-500) 18%, transparent);

  /* Status */
  --color-success: var(--green-500);
  --color-success-text: var(--green-700);
  --color-success-bg: var(--green-50);
  --color-success-border: color-mix(in oklch, var(--green-500) 28%, white);
  --color-danger: var(--red-500);
  --color-danger-text: var(--red-700);
  --color-danger-bg: var(--red-50);
  --color-danger-border: color-mix(in oklch, var(--red-500) 28%, white);
  --color-danger-dot: var(--red-400);
  --color-warning: var(--amber-500);
  --color-warning-text: var(--amber-700);
  --color-warning-bg: var(--amber-50);
  --color-warning-border: color-mix(in oklch, var(--amber-500) 35%, white);
  --color-info: var(--blue-500);
  --color-info-text: color-mix(in oklch, var(--blue-500) 80%, black);
  --color-info-bg: color-mix(in oklch, var(--blue-500) 7%, white);
  --color-info-border: color-mix(in oklch, var(--blue-500) 22%, white);
  --color-neutral-badge-bg: var(--neutral-100);
  --color-neutral-badge-text: var(--neutral-700);

  /* App bar */
  --color-header-bg: var(--navy-500);
  --color-header-text: #ffffff;
  --color-header-text-muted: rgb(255 255 255 / 0.8);
  --color-header-hover: rgb(255 255 255 / 0.1);
  --color-header-active: rgb(255 255 255 / 0.16);
  --color-header-divider: rgb(255 255 255 / 0.4);

  /* Accounting (Rent-specific) */
  --color-amount-positive: var(--green-700);
  --color-amount-negative: var(--red-700);
  --color-amount-zero: var(--neutral-500);
  --color-row-hover: var(--neutral-25);
  --color-row-selected: var(--brand-50);
  --color-row-spacer: var(--neutral-50);
  --color-row-locked: var(--neutral-25);
  --color-row-total: var(--neutral-50);
  --color-row-nopay: color-mix(in oklch, var(--amber-500) 6%, white);
  --color-cell-edit-ring: var(--brand-500);
  --color-cell-saved: color-mix(in oklch, var(--green-500) 10%, white);

  /* Shadows (Figma effect styles, cleaned) */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-card: 0 2px 5px rgb(0 0 0 / 0.02), 0 0 0 1px rgb(16 24 40 / 0.06);
  --shadow-md: 0 5px 22px rgb(0 0 0 / 0.04), 0 0 0 1px rgb(16 24 40 / 0.06);
  --shadow-lg: 0 14px 26px rgb(0 0 0 / 0.04);
  --shadow-popover: 0 12px 28px -6px rgb(16 24 40 / 0.14), 0 0 0 1px rgb(16 24 40 / 0.06);
  --shadow-modal: 0 24px 56px -12px rgb(16 24 40 / 0.24), 0 0 0 1px rgb(16 24 40 / 0.06);
  --shadow-raised: 0 2px 4px -2px rgb(0 0 0 / 0.1), 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-sticky-x: 6px 0 8px -6px rgb(16 24 40 / 0.14);

  /* Typography roles */
  --text-display: var(--fw-semibold) var(--fs-display) / var(--lh-tight) var(--font-display);
  --text-h2: var(--fw-semibold) var(--fs-h2) / var(--lh-snug) var(--font-display);
  --text-h3: var(--fw-semibold) var(--fs-h3) / var(--lh-snug) var(--font-display);
  --text-num-xl: var(--fw-semibold) var(--fs-num-xl) / var(--lh-tight) var(--font-ui);
  --text-lg: var(--fw-medium) var(--fs-lg) / 1.5 var(--font-ui);
  --text-md: var(--fw-regular) var(--fs-md) / 1.43 var(--font-ui);
  --text-md-medium: var(--fw-medium) var(--fs-md) / 1.43 var(--font-ui);
  --text-sm: var(--fw-regular) var(--fs-sm) / var(--lh-normal) var(--font-ui);
  --text-xs: var(--fw-regular) var(--fs-xs) / 1.33 var(--font-ui);
  --text-overline: var(--fw-medium) var(--fs-2xs) / 1.45 var(--font-ui);

  /* Layout */
  --container: 1200px;
  --page-gutter: clamp(1rem, 0.824rem + 0.751vw, 1.5rem); /* 16 → 24 */
  --stack-gap: clamp(1rem, 0.912rem + 0.376vw, 1.25rem); /* 16 → 20 */
  --header-h: 64px;

  /* Z-index */
  --z-sticky: 10;
  --z-header: 50;
  --z-dropdown: 60;
  --z-modal: 80;
  --z-toast: 90;
  --z-tooltip: 100;

  /* ============================================================
     3. COMPONENT
     ============================================================ */

  /* Controls */
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --control-px-sm: var(--space-2-5);
  --control-px-md: 14px;
  --control-px-lg: var(--space-5);
  --control-radius-sm: var(--radius-sm);
  --control-radius-md: var(--radius-md);
  --control-radius-lg: var(--radius-lg);
  --control-border: var(--color-border-strong);
  --control-border-hover: var(--neutral-400);
  --control-bg: var(--color-surface);
  --control-bg-disabled: var(--color-surface-muted);

  /* Button */
  --btn-font: var(--fw-medium) var(--fs-md) / 1.2 var(--font-display);
  --btn-font-lg: var(--fw-semibold) var(--fs-lg) / 1.2 var(--font-display);
  --btn-primary-bg: var(--color-action);
  --btn-primary-bg-hover: var(--color-action-hover);
  --btn-primary-text: #ffffff;
  --btn-dark-bg: #101220;
  --btn-dark-bg-hover: #23263a;

  /* Input */
  --input-h: var(--control-h-lg);
  --input-radius: var(--control-radius-lg);
  --input-px: 14px;
  --input-font: var(--fw-regular) var(--fs-lg) / 1.5 var(--font-ui);
  --label-font: var(--text-md-medium);
  --field-gap: var(--space-1-5);

  /* Card */
  --card-bg: var(--color-surface);
  --card-radius: var(--radius-xl);
  --card-pad: clamp(1rem, 0.824rem + 0.751vw, 1.5rem); /* 16 → 24 */
  --card-shadow: var(--shadow-card);

  /* Tabs */
  --tab-h: 32px;
  --tab-radius: var(--radius-sm);

  /* Segmented control: gray track, white raised active segment */
  --segmented-track: var(--neutral-100);
  --segmented-track-border: var(--neutral-200);
  --segmented-text: var(--color-text-secondary);
  --segmented-hover: rgb(255 255 255 / 0.6);
  --segmented-active-bg: var(--color-surface);
  --segmented-active-text: var(--color-text);
  --segmented-active-shadow: 0 1px 2px rgb(16 24 40 / 0.1), 0 0 0 1px rgb(16 24 40 / 0.06);

  /* Badge */
  --badge-h: 22px;
  --badge-h-sm: 18px;

  /* Table / data grid */
  --table-row-h: 40px;
  --table-head-h: 34px;
  --table-cell-px: 12px;
  --table-font: var(--fw-regular) var(--fs-md) / 1.35 var(--font-ui);
  --table-head-font: var(--text-overline);
  --table-head-bg: var(--neutral-25);
  --table-head-text: var(--color-text-tertiary);
  --table-line: var(--color-border-subtle);
  --table-line-strong: var(--color-border);

  /* Modal */
  --modal-w-sm: 440px;
  --modal-w-md: 640px;
  --modal-w-lg: 880px;
  --modal-radius: var(--radius-xl);
  --modal-pad: var(--card-pad);
}

/* ---------- Desktop ≥ 1280 ---------- */
@media (min-width: 1280px) {
  :root {
    --card-radius: var(--radius-2xl);
  }
}

/* ---------- Mobile < 768: finger-friendly controls ---------- */
@media (max-width: 767.98px) {
  :root {
    --header-h: 56px;
    --control-h-md: 44px;
    --control-h-lg: 44px;
    --tab-h: 36px;
  }
}

/* ---------- Table density (on any ancestor) ---------- */
[data-density='dense'] {
  --table-row-h: 36px;
  --table-head-h: 32px;
  --table-cell-px: 10px;
  --table-font: var(--fw-regular) var(--fs-sm) / 1.35 var(--font-ui);
}
[data-density='comfortable'] {
  --table-row-h: 48px;
  --table-head-h: 36px;
  --table-cell-px: 16px;
}

/* ---------- Theme presets (example of customisation) ---------- */
[data-theme='emerald'] {
  --brand-seed: #0e9f6e;
  --header-seed: #134e4a;
}
[data-theme='graphite'] {
  --brand-seed: #3f4a5a;
  --header-seed: #1f2633;
  --radius-scale: 0.6;
}