:root {
  /* Core palette — page 3 of Brand Guidelines v1.0 */
  --laayn-indigo: #443464;   /* brand core, headlines, primary CTAs */
  --indigo-deep: #2A2044;    /* dark surfaces, hero bands */
  --indigo-soft: #8B7AB8;    /* secondary accents, charts */
  --indigo-tint: #ECE8F5;    /* backgrounds, badges, hovers */
  --signal-coral: #E2705F;   /* accent + alerts, emphasis (max 5%) */
  --ink: #1C1830;            /* body text */
  --slate: #5B5478;          /* secondary text, captions */
  --fog-white: #F7F6FA;      /* page background */
  --white: #FFFFFF;

  /* Extended palette — one product-line hue per context, never more than two
     saturated hues on a single surface alongside indigo. */
  --systems-teal: #2A8C82;   /* IoT & monitoring products */
  --ledger-blue: #3D6BB3;    /* order & tender management */
  --field-green: #4E9455;    /* success states, uptime */
  --notice-amber: #C98A2E;   /* warnings, pending status */

  /* Derived indigo ramp (interpolated between the four published indigos —
     use only where the published four are insufficient, e.g. hover fills) */
  --indigo-900: #1C1830;
  --indigo-800: #2A2044;
  --indigo-700: #372A52;
  --indigo-600: #443464;
  --indigo-500: #5B4A7D;
  --indigo-400: #8B7AB8;
  --indigo-300: #B4A8D2;
  --indigo-200: #D6CEE9;
  --indigo-100: #ECE8F5;
  --indigo-50:  #F7F6FA;

  /* Derived coral ramp */
  --coral-600: #C9553F;
  --coral-500: #E2705F;
  --coral-300: #F0A899;
  --coral-100: #FBE3DE;

  /* ---- Semantic aliases: use these in product code ---- */
  --surface-page: var(--fog-white);
  --surface-card: var(--white);
  --surface-sunken: var(--indigo-50);
  --surface-raised: var(--white);
  --surface-dark: var(--indigo-deep);
  --surface-dark-raised: #372A52;
  --surface-accent: var(--indigo-tint);

  --text-heading: var(--laayn-indigo);
  --text-body: var(--ink);
  --text-secondary: var(--slate);
  --text-muted: #8983A0;
  --text-on-dark: var(--white);
  --text-on-dark-secondary: #C4BCDC;
  --text-accent: var(--signal-coral);
  --text-link: var(--laayn-indigo);
  --text-link-hover: var(--indigo-800);

  --border-hairline: var(--indigo-tint);
  --border-strong: var(--indigo-200);
  --border-input: #DDD8EC;
  --border-focus: var(--laayn-indigo);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  --action-primary-bg: var(--laayn-indigo);
  --action-primary-bg-hover: var(--indigo-800);
  --action-primary-bg-active: var(--indigo-900);
  --action-primary-fg: var(--white);
  --action-secondary-bg: var(--white);
  --action-secondary-bg-hover: var(--indigo-50);
  --action-secondary-fg: var(--laayn-indigo);
  --action-destructive-bg: var(--signal-coral);
  --action-destructive-bg-hover: var(--coral-600);
  --action-disabled-bg: var(--indigo-100);
  --action-disabled-fg: #A9A2C0;

  --status-success: var(--field-green);
  --status-success-soft: #E7F1E8;
  --status-warning: var(--notice-amber);
  --status-warning-soft: #F9F0DF;
  --status-alert: var(--signal-coral);
  --status-alert-soft: var(--coral-100);
  --status-info: var(--ledger-blue);
  --status-info-soft: #E4EBF6;
  --status-neutral: var(--slate);
  --status-neutral-soft: var(--indigo-50);

  /* Data-visualisation order */
  --chart-1: var(--laayn-indigo);
  --chart-2: var(--indigo-soft);
  --chart-3: var(--systems-teal);
  --chart-4: var(--ledger-blue);
  --chart-5: var(--notice-amber);
  --chart-6: var(--signal-coral);
}

/* Dark surface scope — apply to any panel that sits on Indigo Deep. */
[data-surface="dark"] {
  --surface-card: var(--surface-dark-raised);
  --surface-page: var(--indigo-deep);
  --text-heading: var(--white);
  --text-body: var(--white);
  --text-secondary: var(--text-on-dark-secondary);
  --border-hairline: var(--border-on-dark);
  --action-primary-bg: var(--white);
  --action-primary-fg: var(--laayn-indigo);
  --action-primary-bg-hover: var(--indigo-100);
}