/*
 * PhoneHub — design tokens (single source of truth).
 * Values are taken 1:1 from the SCRM Figma variables (file bxb0j8oVaSY0a7JWW4pPJY);
 * names follow the Figma variable names so design ↔ code stay traceable.
 * Components and pages reference ONLY these variables — no raw colors elsewhere.
 */
:root {
  color-scheme: dark;

  /* ---- surfaces ---- */
  --color-background-static: #0a0a0a;   /* app background */
  --color-background-weakest: #121212;  /* cards, inputs, panels, pill containers */
  --color-background-weak: #1f1f1f;     /* tooltip, secondary button, checkbox */
  --color-background-light: #3b3b3b;    /* pressed / active icon button */
  --color-background-elevated: #1a1b1f; /* menus, dropdowns */
  --color-background-hover: #ffffff05;  /* row / card hover tint */
  --color-overlay: #0000009e;           /* modal backdrop */
  --color-shimmer: #ffffff0a;           /* skeleton shimmer sweep */

  /* ---- strokes ---- */
  --color-stroke-weakest: #18181b;
  --color-stroke-weak: #27272a;
  --color-stroke-light: #3f3f46;

  /* ---- text & icons ---- */
  --color-text-strongest: #fafafa;
  --color-text-body: #d4d4d8;
  --color-text-placeholder: #71717b;
  --color-text-disabled: #52525c;
  --color-text-static: #ffffff;         /* text on filled primary / danger buttons */
  --color-icon-strongest: #fafafa;
  --color-icon-body: #d4d4d8;
  --color-icon-placeholder: #71717b;
  --color-icon-disabled: #52525c;

  /* ---- accent ---- */
  --color-primary-base: #615fff;
  --color-primary-strong: #7c86ff;
  --color-primary-weak: #615fff3d;
  --color-primary-weakest: #615fff14;

  /* ---- states ---- */
  --color-state-success-base: #00a63e;
  --color-state-success-strong: #00c950;
  --color-state-success-weakest: #00c95014;
  --color-state-info-base: #2b7fff;
  --color-state-info-strong: #50a2ff;
  --color-state-info-weak: #50a2ff3d;
  --color-state-info-weakest: #50a2ff14;
  --color-state-warning-strong: #ff8904;
  --color-state-warning-weakest: #ff890414;
  --color-status-away-base: #f0b100;
  --color-status-away-strong: #fdc700;
  --color-state-error-base: #fb2c36;
  --color-state-error-strong: #ff6467;
  --color-state-error-weak: #fb2c363d;
  --color-state-error-weakest: #fb2c3614;
  --color-status-highlighted-strong: #ed6aff;

  /* ---- metric-card glows (radial, from the right edge) ---- */
  --glow-success: #00c95014;
  --glow-away: #f0b10014;

  /* ---- semantic: device status (color is never the only signal — always + icon + text) ---- */
  --status-online: var(--color-state-success-strong);
  --status-offline: var(--color-text-placeholder);
  --status-error: var(--color-state-error-strong);
  --status-warning: var(--color-state-warning-strong);
  --status-cloud: var(--color-primary-strong);
  --battery-ok: var(--color-state-success-strong);
  --battery-low: var(--color-state-warning-strong);      /* ≤30% */
  --battery-critical: var(--color-state-error-strong);   /* ≤15% */

  /* ---- typography ---- */
  --font-display: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* numbers, time, IDs */

  /* size / line-height / letter-spacing per Figma text style */
  --control-md: 14px; --control-md-lh: 18px; --control-md-ls: -0.3px;   /* buttons, tabs, pills */
  --control-sm: 12px; --control-sm-lh: 16px; --control-sm-ls: -0.2px;
  --control-xs: 11px; --control-xs-lh: 12px; --control-xs-ls: -0.1px;   /* tab counters */
  --body-lg: 18px;    --body-lg-lh: 26px;                               /* modal title */
  --body-md: 16px;    --body-md-lh: 24px;
  --body-sm: 14px;    --body-sm-lh: 20px;                               /* table cells, body */
  --body-xs: 12px;    --body-xs-lh: 18px;                               /* labels, hints */
  --caption-md: 13px; --caption-md-lh: 20px;
  --numeric-sm: 14px; --numeric-sm-lh: 18px;
  --numeric-md: 16px; --numeric-md-lh: 20px;
  --heading-h4: 32px; --heading-h4-lh: 1.4; --heading-h4-ls: -1.2px;    /* metric values */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---- radius ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;    /* buttons, inputs, badges */
  --radius-xl: 12px;   /* modals, cards, pill containers */
  --radius-2xl: 16px;  /* metric cards */
  --radius-full: 9999px;

  /* ---- spacing (Figma "component" scale) ---- */
  --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-6: 24px;
  --space-8: 32px;

  /* ---- sizes ---- */
  --size-sidebar: 36px;
  --size-control: 36px;   /* input / select height, icon button */
  --size-hit-min: 32px;   /* minimum clickable area */
  --size-row: 46px;       /* table row */
  --size-icon: 18px;
  --size-icon-sm: 16px;
  --size-icon-xs: 12px;

  /* ---- shadows / effects ---- */
  --shadow-primary: inset 0 0 0 1px var(--color-primary-base), inset 0 -2px 0 #ffffff29;
  --shadow-danger: inset 0 0 0 1px var(--color-state-error-base), inset 0 -2px 0 #00000029;
  --shadow-success: inset 0 0 0 1px var(--color-state-success-base), inset 0 -2px 0 #ffffff29;
  --shadow-modal: 0 14px 17px #0000004d;
  --shadow-popover: 0 1px 1px #0000001a, 0 1px 2px #0000001a, 0 2px 4px #0000001a;
  --shadow-text-2xs: 0 1px 0 #00000026;  /* text on filled buttons */
  --focus-ring: 0 0 0 2px var(--color-background-static), 0 0 0 4px var(--color-primary-strong);

  /* ---- motion (only transform + opacity are animated) ---- */
  --dur-micro: 150ms;    /* hover, press, toggles: 120–180 */
  --dur-panel: 240ms;    /* modals, panels, toasts: 200–280 */
  --dur-long: 360ms;     /* counters, chart bars: ≤400 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --press-scale: 0.97;
  --stagger-step: 30ms;

  /* ---- layering ---- */
  --z-sticky: 20;
  --z-dropdown: 40;
  --z-toast: 90;
  --z-modal: 100;
}

/* Reduced motion: keep only short fades, drop movement. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0ms;
    --dur-panel: 120ms;
    --dur-long: 0ms;
    --press-scale: 1;
    --stagger-step: 0ms;
  }
}