:root {
  /* LotSync website: dark graphite, restrained service-blue action system. */

  /* Colors */
  --color-void-black: #0f1113;
  --color-carbon-surface: #15181b;
  --color-gunmetal: #20252a;
  --color-steel-border: #64707d;
  --color-muted-steel: #a0a9b3;
  --color-frost: #e8edf2;
  --color-pure-white: #ffffff;
  --color-deep-ink: #000000;
  --color-service-blue: #136bc4;
  --color-service-blue-hover: #1579d8;
  --color-service-blue-pressed: #0f67b5;
  --color-sky-focus: #6dbef8;
  --color-iris-blue: var(--color-service-blue);
  --gradient-iris-blue: var(--color-service-blue);
  --color-periwinkle-glow: var(--color-sky-focus);

  /* ── SEMANTIC COLOUR ROLES ── */
  --color-action: var(--color-service-blue);
  --color-action-hover: var(--color-service-blue-hover);
  --color-action-pressed: var(--color-service-blue-pressed);
  --color-action-soft: rgba(19, 107, 196, 0.16);
  --gradient-action: var(--color-action);
  --color-accent: var(--color-sky-focus);
  --color-focus-ring: var(--color-sky-focus);
  --color-control: #20252a;
  --color-control-hover: #252b31;
  --color-control-pressed: #2c333a;
  --color-control-border: #47515c;
  --color-control-border-hover: #64707d;
  --border-structural: rgba(100, 112, 125, 0.46);
  --border-subtle: rgba(100, 112, 125, 0.24);

  /* Surfaces */
  --surface-canvas: #0f1113;
  --surface-card-surface: #15181b;
  --surface-elevated-border: #20252a;

  /* Semantic aliases */
  --color-bg-base: #0f1113;
  --color-bg-surface: #15181b;
  --color-bg-elevated: #20252a;
  --color-bg-subtle: #20252a;
  --color-bg-dark: #090b0d;
  --color-text-primary: #ffffff;
  --color-text-secondary: #e8edf2;
  --color-text-muted: #a0a9b3;
  --color-text-inverse: #ffffff;
  --color-accent-primary: var(--color-accent);
  --color-accent-secondary: var(--color-action);
  --color-accent-solid: var(--color-accent);
  --color-accent-glow: rgba(109, 190, 248, 0.22);
  --color-border: #2c333a;
  --color-border-strong: #64707d;
  --color-border-card: #2c333a;

  /* Semantic */
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-error: #F87171;

  /* Fonts — Inter as substitute for Helvetica Now */
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Type scale — Better Stack */
  --text-caption: 10px;
  --leading-caption: 1.55;
  --tracking-caption: 0;
  --text-body-sm: 14px;
  --leading-body-sm: 1.55;
  --tracking-body-sm: 0;
  --text-body: 16px;
  --leading-body: 1.6;
  --tracking-body: 0;
  --text-subheading: 20px;
  --leading-subheading: 1.45;
  --tracking-subheading: 0;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.45;
  --tracking-heading-sm: 0;
  --text-heading: 36px;
  --leading-heading: 1.17;
  --tracking-heading: 0;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: 0;
  --text-display: 53px;
  --leading-display: 1.08;
  --tracking-display: 0;

  /* Legacy aliases for home.css compatibility */
  --text-hero: 53px;
  --leading-hero: 1.08;
  --tracking-hero: 0;
  --text-title: 40px;
  --text-small: 14px;
  --text-mono: 13px;
  --text-label: 10px;
  --tracking-label: 0.05em;

  /* Spacing — 4px base unit */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-128: 128px;
  --spacing-164: 164px;
  --spacing-192: 192px;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 1.5rem;
  --container-pad-m: 1rem;
  --page-max-width: 1200px;
  --section-gap: 56px;
  --space-section: 56px;
  --space-section-m: 36px;
  --space-gap-xs: 6px;
  --space-gap-sm: 12px;
  --space-gap-md: 20px;
  --space-gap-lg: 28px;
  --space-gap-xl: 40px;
  --card-padding: 20px;
  --element-gap: 20px;
  --nav-height: 64px;

  /* Border radius */
  --radius-lg: 8px;
  --radius-2xl: 8px;
  --radius-3xl: 10px;
  --radius-3xl-2: 12px;
  --radius-full: 200px;
  --radius-full-2: 9999px;
  --radius-nav: 8px;
  --radius-cards: 8px;
  --radius-card: 8px;
  --radius-inputs: 8px;
  --radius-input: 8px;
  --radius-buttons: 8px;
  --radius-button: 8px;
  --radius-badge: 6px;
  --radius-pill: 8px;

  /* Shadows */
  --shadow-subtle: rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset;
  --shadow-nav: rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset;
  --shadow-cta: 0 0 0 transparent;
  --shadow-card: rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
  --shadow-glow: 0 0 0 transparent;
  --shadow-glass: rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset;

  /* Easing */
  --ease-standard: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0.0, 1, 1);

  /* Z-index */
  --z-base: 0;
  --z-raised: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
}