/* LOGE — Color tokens (Material-3 derived palette) */
:root {
  /* ---- Primary (deep navy) ---- */
  --color-primary: #041534;
  --color-on-primary: #ffffff;
  --color-primary-container: #1b2a4a;
  --color-on-primary-container: #8392b7;
  --color-primary-fixed: #d9e2ff;
  --color-primary-fixed-dim: #b7c6ee;
  --color-on-primary-fixed: #0a1a3a;
  --color-on-primary-fixed-variant: #384668;
  --color-inverse-primary: #b7c6ee;

  /* ---- Secondary (amber / brown) ---- */
  --color-secondary: #835400;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #fdb244;
  --color-on-secondary-container: #6e4600;
  --color-secondary-fixed: #ffddb5;
  --color-secondary-fixed-dim: #ffb956;
  --color-on-secondary-fixed: #2a1800;
  --color-on-secondary-fixed-variant: #633f00;

  /* ---- Tertiary (neutral slate) ---- */
  --color-tertiary: #10171c;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #252b31;
  --color-on-tertiary-container: #8c9299;
  --color-tertiary-fixed: #dde3eb;
  --color-tertiary-fixed-dim: #c1c7cf;
  --color-on-tertiary-fixed: #161c22;
  --color-on-tertiary-fixed-variant: #41474e;

  /* ---- Accent — urgent amber (used for high-attention CTAs) ---- */
  --color-urgent-amber: #f2a93b;

  /* ---- Error ---- */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* ---- Success (delivered / confirmed) ---- */
  --color-success: #2e7d32;
  --color-success-container: #dcfce7;
  --color-on-success-container: #166534;

  /* ---- Background & surfaces ---- */
  --color-background: #f9f9ff;
  --color-on-background: #121c2c;
  --color-surface: #f9f9ff;
  --color-on-surface: #121c2c;
  --color-on-surface-variant: #45464e;
  --color-surface-variant: #d9e3f9;
  --color-surface-bright: #f9f9ff;
  --color-surface-dim: #d0daf0;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f0f3ff;
  --color-surface-container: #e7eeff;
  --color-surface-container-high: #dee8ff;
  --color-surface-container-highest: #d9e3f9;
  --color-inverse-surface: #273141;
  --color-inverse-on-surface: #ebf1ff;
  --color-surface-tint: #4f5e81;

  /* ---- Outline ---- */
  --color-outline: #75777f;
  --color-outline-variant: #c5c6cf;

  /* ---- Carrier brand colors (for logistics chips) ---- */
  --color-carrier-laposte: #2563eb;
  --color-carrier-chronopost: #dc2626;
  --color-carrier-tnt: #f97316;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--color-surface-dim);
  --surface-card: var(--color-surface-container-lowest);
  --surface-sunken: var(--color-surface-container-low);
  --surface-raised: var(--color-surface-container);
  --text-primary: var(--color-on-background);
  --text-secondary: var(--color-on-surface-variant);
  --text-brand: var(--color-primary);
  --border-subtle: var(--color-outline-variant);
  --border-strong: var(--color-outline);
  --accent-cta: var(--color-secondary-container);
  --accent-cta-strong: var(--color-urgent-amber);

  /* Link colors */
  --link-color: var(--color-primary);
  --link-hover: var(--color-primary-container);
}

/* Dark surface scope — mirrors the app's dark screens (deep navy field). */
.dark {
  --surface-page: var(--color-on-background);       /* #121c2c */
  --surface-card: var(--color-primary-container);   /* #1b2a4a */
  --surface-sunken: #0d1626;
  --surface-raised: rgba(27, 42, 74, 0.4);
  --text-primary: #ffffff;
  --text-secondary: var(--color-outline-variant);
  --text-brand: var(--color-primary-fixed);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --link-color: var(--color-primary-fixed);
  --link-hover: #ffffff;
}