:root,
.light-theme {
  /* Brand palette */
  --dp-primary: #1976d2;
  --dp-success: #28a745;
  --dp-warning: #ffc107;
  --dp-error: #dc3545;
  --dp-gray: #6c757d;

  /* Neutrals */
  --dp-background: #f7f9fb; /* page background */
  --dp-surface: #ffffff;   /* card / surface */
  --dp-text: #2d3748;      /* primary text */
  --dp-muted: #6c757d;     /* secondary text */
  --dp-border: #dee2e6;
  --dp-shadow: rgba(0, 0, 0, 0.05);
  --dp-on-strong: #ffffff; /* text on saturated chips/badges */

  /* App-bar / navigation */
  --dp-appbar-bg: linear-gradient(90deg, #2e638c 0%, #5156a2 50%);
  --dp-header-icon: #ffffff;

  /* Typography */
  --font-sans: 'Lato', Helvetica, Arial, sans-serif;
  --font-mono: 'Roboto Mono', 'Courier New', monospace;
  /* Font families */
  --font-display: 'Orbitron', sans-serif;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Font size scale */
  --fs-xxs: 0.625rem; /* 10px */
  --fs-xs: 0.75rem;   /* 12px */
  --fs-sm: 0.875rem;  /* 14px */
  --fs-md: 1rem;      /* 16px */
  --fs-lg: 1.25rem;   /* 20px */
  --fs-xl: 1.5rem;    /* 24px */
  --fs-2xl: 2rem;     /* 32px */
  --fs-3xl: 2.5rem;   /* 40px */
  --fs-4xl: 3rem;     /* 48px */
  --fs-5xl: 4rem;     /* 64px */

  /* Line heights */
  --lh-tight: 1.2;
  --lh-normal: 1.4;
  --lh-loose: 1.6;
}

.dark-theme {
  --dp-primary: #506db1; /* Dataplicity purple-blue */
  --dp-success: #2ab859;
  --dp-warning: #ebba2e;
  --dp-error: #fc5c31;
  --dp-gray: #a9a9b8;
  --dp-background: #272727;
  --dp-surface: #202020;
  --dp-text: #ffffff;
  --dp-muted: #a9a9b8;
  --dp-border: #404040;
  --dp-shadow: rgba(0, 0, 0, 0.4);
  --dp-on-strong: #ffffff;
  --dp-appbar-bg: linear-gradient(90deg, #2e638c 0%, #5156a2 50%);
  --dp-header-icon: #ffffff;
}

/* Apply same variables when Vuetify adds v-theme--dark class */
.v-theme--dark {
  --dp-primary: #506db1;
  --dp-success: #2ab859;
  --dp-warning: #ebba2e;
  --dp-error: #fc5c31;
  --dp-gray: #a9a9b8;
  --dp-background: #272727;
  --dp-surface: #202020;
  --dp-text: #ffffff;
  --dp-muted: #a9a9b8;
  --dp-border: #404040;
  --dp-shadow: rgba(0, 0, 0, 0.4);
  --dp-on-strong: #ffffff;
  --dp-appbar-bg: linear-gradient(90deg, #2e638c 0%, #5156a2 50%);
  --dp-header-icon: #ffffff;
}

/* Legacy variable names kept for compatibility (maps to new dp- prefix) */
:root,
.light-theme {
  --color-background: var(--dp-background);
  --color-surface: var(--dp-surface);
  --color-text: var(--dp-text);
  --color-muted: var(--dp-muted);
  --color-border: var(--dp-border);
  --color-shadow: var(--dp-shadow);
}
.dark-theme {
  --color-background: var(--dp-background);
  --color-surface: var(--dp-surface);
  --color-text: var(--dp-text);
  --color-muted: var(--dp-muted);
  --color-border: var(--dp-border);
  --color-shadow: var(--dp-shadow);
}

  /* Accent / utility hues */
:root,
.light-theme {
  --color-blue-light: #90caf9;
  --color-blue: #1976d2;
  --color-gray-light: #f0f4f8;
  --color-gray-lighter: #f9fbfd;
}
.dark-theme {
  --color-blue-light: #90caf9;
  --color-blue: #1976d2;
  --color-gray-light: #f0f4f8;
  --color-gray-lighter: #f9fbfd;
}

  /* Sizing */
:root {
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
}

  /* Radius */
:root {
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

  /* Shadows */
:root {
  --shadow-sm: 0 1px 2px var(--color-shadow);
  --shadow-md: 0 2px 4px var(--color-shadow);
  --shadow-lg: 0 4px 12px var(--color-shadow);
}