/*
  Vetrixo design tokens - single source of truth for colour and elevation.

  Load this BEFORE any page stylesheet. Page stylesheets must not redefine
  colour; they consume the aliases below. Non-colour tokens that genuinely
  differ per surface (--max-page, --radius-*, --control-h) stay local.

  Layers:
    --vx-*    canonical values. The only place a colour literal is written.
    aliases   the names existing stylesheets already use, pointed at --vx-*.

  Dark mode is driven by BOTH the OS setting and an optional data-theme
  attribute, so dark works with JavaScript disabled and a manual toggle
  remains possible. Only the --vx-* layer is redeclared for dark; the
  aliases are var() references and follow automatically.
*/

:root {
  color-scheme: light dark;

  /* Surfaces */
  --vx-surface: #ffffff;
  --vx-surface-veil: rgba(255, 255, 255, 0.96);
  --vx-surface-muted: #f7f8fc;
  --vx-surface-strong: #ffffff;
  --vx-page-top: #f7f8fc;
  --vx-page-bottom: #eef0f4;

  /* Text */
  --vx-ink: #111827;
  --vx-ink-soft: #5f6b7a;
  --vx-ink-faint: #8a96a8;

  /* Lines */
  --vx-border: #e5e7eb;
  --vx-border-soft: #eef0f4;
  --vx-border-strong: #cbd5e1;

  /* Brand */
  --vx-brand: #5b3fd6;
  --vx-brand-dark: #452eb3;
  --vx-brand-soft: #eee9ff;
  --vx-brand-soft-on-surface: #eee9ff;
  --vx-brand-border: #d8d0ff;
  --vx-brand-wash: #f4f1ff;
  --vx-brand-lift: #6c4df2;

  /* Functional - validation, fulfilment state and blocking errors only */
  --vx-success: #047857;
  --vx-success-indicator: #169c5c;
  --vx-success-soft: #ecfdf5;
  --vx-success-border: #a7f3d0;
  --vx-warning: #92400e;
  --vx-warning-indicator: #fbbf24;
  --vx-warning-soft: #fff7ed;
  --vx-warning-border: #f3d38b;
  --vx-danger: #b00020;
  --vx-danger-soft: #fff1f2;
  --vx-danger-border: #f1c1c7;

  /* Elevation */
  --vx-shadow-lg: 0 22px 54px rgba(17, 24, 39, 0.09);
  --vx-shadow-sm: 0 10px 28px rgba(17, 24, 39, 0.06);
  --vx-shadow-xs: 0 12px 30px rgba(17, 24, 39, 0.055);

  /* Interaction - primary button text and shadow, input focus.
     Deliberately not redeclared for dark: they render the same in both themes. */
  --vx-on-brand: #ffffff;
  --vx-brand-shadow: 0 14px 28px rgba(91, 63, 214, 0.18);
  --vx-brand-shadow-hover: 0 18px 34px rgba(91, 63, 214, 0.22);
  --vx-focus-border: rgba(91, 63, 214, 0.52);
  --vx-focus-ring: 0 0 0 4px rgba(91, 63, 214, 0.12);

  /* ---- Aliases: application stylesheets (vet.css, pharmacy.css) ---- */
  --surface: var(--vx-surface-veil);
  --surface-solid: var(--vx-surface);
  --surface-muted: var(--vx-surface-muted);
  --surface-strong: var(--vx-surface-strong);
  --surface-purple: var(--vx-brand-wash);
  --page-bg-top: var(--vx-page-top);
  --page-bg-bottom: var(--vx-page-bottom);

  --text: var(--vx-ink);
  --text-soft: var(--vx-ink-soft);
  --text-faint: var(--vx-ink-faint);

  --border: var(--vx-border);
  --border-soft: var(--vx-border-soft);
  --border-strong: var(--vx-border-strong);
  --border-purple: var(--vx-brand-border);

  --brand: var(--vx-brand);
  --brand-dark: var(--vx-brand-dark);
  --brand-soft: var(--vx-brand-soft);
  --brand-lift: var(--vx-brand-lift);

  --success: var(--vx-success);
  --success-soft: var(--vx-success-soft);
  --success-border: var(--vx-success-border);
  --warning: var(--vx-warning);
  --warning-soft: var(--vx-warning-soft);
  --warning-border: var(--vx-warning-border);
  --danger: var(--vx-danger);
  --danger-soft: var(--vx-danger-soft);
  --danger-border: var(--vx-danger-border);
  --error-bg: var(--vx-danger-soft);
  --error-border: var(--vx-danger-border);

  --shadow: var(--vx-shadow-lg);
  --shadow-soft: var(--vx-shadow-xs);

  --on-brand: var(--vx-on-brand);
  --shadow-brand: var(--vx-brand-shadow);
  --shadow-brand-hover: var(--vx-brand-shadow-hover);
  --focus-border: var(--vx-focus-border);
  --focus-ring: var(--vx-focus-ring);

  /* ---- Aliases: static pages (styles.css, index.html) ---- */
  --primary: var(--vx-brand);
  --primary-soft: var(--vx-brand-soft);
  --muted: var(--vx-ink-soft);
  --bg: var(--vx-surface);
  --section: var(--vx-surface-muted);
  --panel: var(--vx-surface-strong);
  --hero-base: var(--vx-brand-wash);
  --hero-glow: rgba(91, 63, 214, 0.17);
  --hero-glow-soft: rgba(91, 63, 214, 0.07);
}

/* Dark - OS setting, unless a page has explicitly opted into light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vx-surface: #111827;
    --vx-surface-veil: rgba(17, 24, 39, 0.94);
    --vx-surface-muted: #172033;
    --vx-surface-strong: #1f2937;
    --vx-page-top: #111827;
    --vx-page-bottom: #0b1220;

    --vx-ink: #f8fafc;
    --vx-ink-soft: #cbd5e1;
    --vx-ink-faint: #94a3b8;

    --vx-border: #2f3b4d;
    --vx-border-soft: #253247;
    --vx-border-strong: #415066;

    --vx-brand: #a995ff;
    --vx-brand-dark: #d8d0ff;
    --vx-brand-soft: rgba(91, 63, 214, 0.32);
    --vx-brand-soft-on-surface: #29245f;
    --vx-brand-border: rgba(169, 149, 255, 0.32);
    --vx-brand-wash: #11182b;

    --vx-success: #34d399;
  --vx-success-indicator: var(--vx-success);
    --vx-success-soft: rgba(4, 120, 87, 0.22);
    --vx-success-border: rgba(52, 211, 153, 0.35);
    --vx-warning: #fbbf24;
    --vx-warning-soft: rgba(146, 64, 14, 0.22);
    --vx-warning-border: rgba(251, 191, 36, 0.34);
    --vx-danger: #f87171;
    --vx-danger-soft: rgba(176, 0, 32, 0.22);
    --vx-danger-border: rgba(248, 113, 113, 0.35);

    --vx-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.32);
    --vx-shadow-sm: 0 20px 48px rgba(0, 0, 0, 0.32);
    --vx-shadow-xs: 0 14px 34px rgba(0, 0, 0, 0.22);

    --hero-glow: rgba(169, 149, 255, 0.16);
    --hero-glow-soft: rgba(169, 149, 255, 0.06);

    --bg: var(--vx-page-bottom);
    --section: var(--vx-surface);
  }
}

/* Dark - explicit opt-in, for a manual toggle or the theme-sync script. */
:root[data-theme="dark"] {
  --vx-surface: #111827;
  --vx-surface-veil: rgba(17, 24, 39, 0.94);
  --vx-surface-muted: #172033;
  --vx-surface-strong: #1f2937;
  --vx-page-top: #111827;
  --vx-page-bottom: #0b1220;

  --vx-ink: #f8fafc;
  --vx-ink-soft: #cbd5e1;
  --vx-ink-faint: #94a3b8;

  --vx-border: #2f3b4d;
  --vx-border-soft: #253247;
  --vx-border-strong: #415066;

  --vx-brand: #a995ff;
  --vx-brand-dark: #d8d0ff;
  --vx-brand-soft: rgba(91, 63, 214, 0.32);
  --vx-brand-soft-on-surface: #29245f;
  --vx-brand-border: rgba(169, 149, 255, 0.32);
  --vx-brand-wash: #11182b;

  --vx-success: #34d399;
  --vx-success-indicator: var(--vx-success);
  --vx-success-soft: rgba(4, 120, 87, 0.22);
  --vx-success-border: rgba(52, 211, 153, 0.35);
  --vx-warning: #fbbf24;
  --vx-warning-soft: rgba(146, 64, 14, 0.22);
  --vx-warning-border: rgba(251, 191, 36, 0.34);
  --vx-danger: #f87171;
  --vx-danger-soft: rgba(176, 0, 32, 0.22);
  --vx-danger-border: rgba(248, 113, 113, 0.35);

  --vx-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.32);
  --vx-shadow-sm: 0 20px 48px rgba(0, 0, 0, 0.32);
  --vx-shadow-xs: 0 14px 34px rgba(0, 0, 0, 0.22);

  --hero-glow: rgba(169, 149, 255, 0.16);
  --hero-glow-soft: rgba(169, 149, 255, 0.06);

  --bg: var(--vx-page-bottom);
  --section: var(--vx-surface);
}