/* =============================================================================
   PO Review Design Tokens
   ---------------------------------------------------------------------------
   Brand, semantic, status, typography, spacing, and motion primitives.
   Plain CSS only — no build step. Loaded before styles.css and Bootstrap.
   ============================================================================= */

:root {
  /* Brand palette (University of Edinburgh Estates) */
  --color-navy: #041e42;
  --color-red: #d50032;
  --color-accent-blue: #0069d9;
  --color-white: #ffffff;
  --color-black: #0b0c0c;

  /* Greys */
  --color-grey-50: #f8f9fa;
  --color-grey-100: #f4f6f8;
  --color-grey-200: #e9ecef;
  --color-grey-300: #dee2e6;
  --color-grey-400: #ced4da;
  --color-grey-500: #adb5bd;
  --color-grey-600: #6c757d;
  --color-grey-700: #495057;
  --color-grey-800: #343a40;
  --color-grey-900: #212529;

  /* Semantic colors */
  --color-success: #198754;
  --color-success-bg: #d1e7dd;
  --color-warning: #b35900;
  --color-warning-bg: #fff3cd;
  --color-danger: #d50032;
  --color-danger-bg: #f8d7da;
  --color-info: #0069d9;
  --color-info-bg: #cfe2ff;

  /* Status lifecycle colors */
  --status-new: #6c757d;
  --status-new-bg: #e9ecef;
  --status-in-progress: #0069d9;
  --status-in-progress-bg: #cfe2ff;
  --status-pending: #b35900;
  --status-pending-bg: #fff3cd;
  --status-completed: #198754;
  --status-completed-bg: #d1e7dd;
  --status-overdue: #d50032;
  --status-overdue-bg: #f8d7da;

  /* Typography */
  --font-sans: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Borders */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;
  --border-radius-2xl: 1rem;
  --border-width: 1px;
  --border-color: var(--color-grey-300);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(4, 30, 66, 0.06);
  --shadow-md: 0 4px 6px rgba(4, 30, 66, 0.08);
  --shadow-lg: 0 10px 15px rgba(4, 30, 66, 0.10);
  --shadow-focus: 0 0 0 0.25rem rgba(0, 105, 217, 0.35);

  /* Motion */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-table-row: background-color var(--transition-fast);

  /* Layout */
  --header-height: 60px;
  --subnav-height: 52px;
  --breadcrumb-height: 44px;
  --max-content-width: 1400px;
  --container-padding: 1rem;

  /* Legacy alias tokens for compatibility during migration */
  --primary-color: var(--color-navy);
  --secondary-color: var(--color-red);
  --accent-blue: var(--color-accent-blue);
  --grey-bg: var(--color-grey-100);
  --hover-row: #e6eef5;
  --subnav-hover: #f4f4f4;
  --footer-bg: var(--color-white);
  --footer-text: var(--color-grey-600);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High-contrast mode: force borders on focus */
@media (prefers-contrast: more) {
  :focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: 2px;
  }
}

/* Dark mode: tokens are not fully supported yet, but respect system preference where possible */
@media (prefers-color-scheme: dark) {
  :root {
    --color-grey-100: #1a1d20;
    --color-grey-200: #2a2e33;
  }
}