/* Design tokens (SPEC section 13). Every visual value lives here so the brand can be
   adjusted in one place.

   Known contrast issue: white text on both brand colours is a deliberate, temporary
   exception to WCAG AA (about 2.4:1 on orange and 3.5:1 on blue-grey). Fix it here by
   changing the brand values, not by overriding colours in components. */

:root {
  /* Brand */
  --color-primary: #f78d26;
  --color-primary-hover: #e57d17;
  --color-on-primary: #ffffff;
  --color-secondary: #689096;
  --color-secondary-hover: #5a7f85;
  --color-on-secondary: #ffffff;
  --color-focus-ring: var(--color-primary);

  /* Neutrals and surfaces */
  --color-page: #f4f6f7;
  --color-surface: #ffffff;
  --color-surface-muted: #eef2f3;
  --color-border: #d8e0e2;
  --color-text: #1f2a2c;
  --color-text-muted: #5b6b6e;

  /* Feedback */
  --color-danger: #b42318;
  --color-danger-hover: #912018;
  --color-on-danger: #ffffff;
  --color-info-bg: var(--color-status-blue-bg);
  --color-info-fg: var(--color-status-blue-fg);
  --color-success-bg: var(--color-status-green-bg);
  --color-success-fg: var(--color-status-green-fg);
  --color-warning-bg: var(--color-status-orange-bg);
  --color-warning-fg: var(--color-status-orange-fg);
  --color-error-bg: var(--color-status-red-bg);
  --color-error-fg: var(--color-status-red-fg);

  /* Status palette: tinted background with dark text, so labels stay readable (AA). */
  --color-status-grey-bg: #e7eaeb;
  --color-status-grey-fg: #3f4a4c;
  --color-status-blue-bg: #dceaf7;
  --color-status-blue-fg: #1d4f7a;
  --color-status-orange-bg: #fde3c8;
  --color-status-orange-fg: #8a4207;
  --color-status-light-orange-bg: #fef1e3;
  --color-status-light-orange-fg: #8a5a24;
  --color-status-red-bg: #f9dcdb;
  --color-status-red-fg: #9b2320;
  --color-status-purple-bg: #ebe1f5;
  --color-status-purple-fg: #5b3486;
  --color-status-teal-bg: #d8eeec;
  --color-status-teal-fg: #1f5f59;
  --color-status-green-bg: #dcf0dc;
  --color-status-green-fg: #2b6a2d;

  /* Request statuses (SPEC section 3) */
  --status-draft-bg: var(--color-status-grey-bg);
  --status-draft-fg: var(--color-status-grey-fg);
  --status-submitted-bg: var(--color-status-blue-bg);
  --status-submitted-fg: var(--color-status-blue-fg);
  --status-in-progress-bg: var(--color-status-blue-bg);
  --status-in-progress-fg: var(--color-status-blue-fg);
  --status-ready-for-customer-bg: var(--color-status-orange-bg);
  --status-ready-for-customer-fg: var(--color-status-orange-fg);
  --status-awaiting-customer-bg: var(--color-status-light-orange-bg);
  --status-awaiting-customer-fg: var(--color-status-light-orange-fg);
  --status-rework-bg: var(--color-status-red-bg);
  --status-rework-fg: var(--color-status-red-fg);
  --status-approved-for-order-bg: var(--color-status-purple-bg);
  --status-approved-for-order-fg: var(--color-status-purple-fg);
  --status-ordered-bg: var(--color-status-purple-bg);
  --status-ordered-fg: var(--color-status-purple-fg);
  --status-article-setup-bg: var(--color-status-teal-bg);
  --status-article-setup-fg: var(--color-status-teal-fg);
  --status-completed-bg: var(--color-status-green-bg);
  --status-completed-fg: var(--color-status-green-fg);
  --status-cancelled-bg: var(--color-status-grey-bg);
  --status-cancelled-fg: var(--color-status-grey-fg);

  /* Typography */
  --font-sans: "Ubuntu", system-ui, sans-serif;
  --font-mono: "Ubuntu Mono", ui-monospace, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --line-height: 1.5;

  /* Shape and spacing */
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --shadow-card: 0 1px 2px rgb(31 42 44 / 6%), 0 4px 16px rgb(31 42 44 / 6%);
  --header-height: 4rem;
  --content-max-width: 80rem;
  --narrow-width: 36rem;
  --auth-card-width: 28rem;
}