/* Karavex Cargo — colours. Source: brandbook v1.0 (primary/secondary palettes) + system/variables.css (derived UI tokens). */
:root {
  /* Primary brand pair */
  --kx-black: #000000;
  --kx-red: #ed2127;
  --kx-white: #ffffff;

  /* Secondary palette — pattern & accents only (brandbook p.3) */
  --kx-crimson: #b72f2a;
  --kx-amber: #f58232;
  --kx-sunshine: #ffd400;
  --kx-moss: #50b848;
  --kx-aqua: #5bc4bf;
  --kx-sky: #4ba6dd;
  --kx-lavender: #d063a5;
  --kx-lilac: #a66ac6;
  --kx-cloud: #d4e0f2;
  --kx-sand: #e5dbb8;

  /* Derived neutrals (DESIGN.md) */
  --kx-cloud-tint: #f3f6fb;
  --kx-gray: #737373;

  /* Primary 10-step ramp (derived from #ed2127) */
  --brand-primary-palette-1: #fff2f0;
  --brand-primary-palette-2: #ffcdc7;
  --brand-primary-palette-3: #ffa59e;
  --brand-primary-palette-4: #ff7a75;
  --brand-primary-palette-5: #fa4c4b;
  --brand-primary-palette-6: #ed2127;
  --brand-primary-palette-7: #c7121d;
  --brand-primary-palette-8: #a10615;
  --brand-primary-palette-9: #7a0010;
  --brand-primary-palette-10: #54000e;

  /* UI tokens (system/variables.css, light) */
  --brand-color-primary: #ed2127;
  --brand-color-primary-bg: #fff2f0;
  --brand-color-primary-bg-hover: #ffcdc7;
  --brand-color-primary-border: #ffa59e;
  --brand-color-primary-border-hover: #ff7a75;
  --brand-color-primary-hover: #fa4c4b;
  --brand-color-primary-active: #c7121d;
  --brand-color-primary-text: #7a0010;
  --brand-color-success: #52c41a;
  --brand-color-success-bg: #f6ffed;
  --brand-color-success-border: #b6eb8f;
  --brand-color-success-hover: #72d13d;
  --brand-color-success-active: #389e0d;
  --brand-color-warning: #faad14;
  --brand-color-warning-bg: #fffbe6;
  --brand-color-warning-border: #ffe58f;
  --brand-color-warning-hover: #ffc53d;
  --brand-color-warning-active: #d48806;
  --brand-color-error: #ff4d4f;
  --brand-color-error-bg: #fff2f0;
  --brand-color-error-border: #ffccc7;
  --brand-color-error-hover: #ff7875;
  --brand-color-error-active: #d9363d;
  --brand-color-info: #ed2127;
  --brand-color-info-bg: #fff2f0;
  --brand-color-info-border: #ffa59e;
  --brand-color-link: #ed2127;
  --brand-color-link-hover: #fa4c4b;
  --brand-color-link-active: #c7121d;
  --brand-color-text: #1f1f1f;
  --brand-color-text-secondary: #595959;
  --brand-color-text-tertiary: #8c8c8c;
  --brand-color-text-quaternary: #bfbfbf;
  --brand-color-fill: #d9d9d9;
  --brand-color-fill-secondary: #f0f0f0;
  --brand-color-fill-tertiary: #f5f5f5;
  --brand-color-fill-quaternary: #fafafa;
  --brand-color-bg-layout: #f5f5f5;
  --brand-color-bg-container: #ffffff;
  --brand-color-bg-elevated: #ffffff;
  --brand-color-border: #d9d9d9;
  --brand-color-border-secondary: #f0f0f0;

  /* Semantic aliases */
  --text-heading: var(--kx-black);
  --text-body: var(--brand-color-text);
  --text-muted: var(--brand-color-text-secondary);
  --text-subtle: var(--brand-color-text-tertiary);
  --text-accent: var(--kx-red);
  --text-on-accent: #ffffff;
  --surface-page: var(--kx-white);
  --surface-layout: var(--brand-color-bg-layout);
  --surface-card: var(--brand-color-bg-container);
  --surface-panel: var(--kx-cloud-tint);
  --surface-accent-soft: var(--brand-color-primary-bg);
  --border-default: var(--brand-color-border);
  --border-subtle: var(--brand-color-border-secondary);
  --border-brand: var(--kx-cloud);
  --accent: var(--kx-red);
}

.dark {
  --brand-color-primary: #d84443;
  --brand-color-primary-bg: #2f1415;
  --brand-color-primary-bg-hover: #4a1719;
  --brand-color-primary-border: #592525;
  --brand-color-primary-border-hover: #7c2d2d;
  --brand-color-primary-hover: #e8706b;
  --brand-color-primary-active: #aa3838;
  --brand-color-primary-text: #f8c7c2;
  --brand-color-success: #64b537;
  --brand-color-success-bg: #192913;
  --brand-color-success-border: #304d20;
  --brand-color-warning: #dcaa37;
  --brand-color-warning-bg: #312512;
  --brand-color-warning-border: #5b4920;
  --brand-color-error: #dc6966;
  --brand-color-error-bg: #32191a;
  --brand-color-error-border: #5b3231;
  --brand-color-info: #d84443;
  --brand-color-info-bg: #2f1415;
  --brand-color-info-border: #592525;
  --brand-color-link: #d84443;
  --brand-color-link-hover: #e8706b;
  --brand-color-link-active: #aa3838;
  --brand-color-text: #dcdcdc;
  --brand-color-text-secondary: #adadad;
  --brand-color-text-tertiary: #7e7e7e;
  --brand-color-text-quaternary: #4f4f4f;
  --brand-color-fill: #3e3e3e;
  --brand-color-fill-secondary: #303030;
  --brand-color-fill-tertiary: #272727;
  --brand-color-fill-quaternary: #1d1d1d;
  --brand-color-bg-layout: #1d1d1d;
  --brand-color-bg-container: #141414;
  --brand-color-bg-elevated: #272727;
  --brand-color-border: #3e3e3e;
  --brand-color-border-secondary: #303030;
  --text-heading: #ffffff;
  --surface-page: #141414;
}