/* ==========================================================================
   VERA by SBS — base.css
   Reset, design tokens, typography, links, global form and focus defaults.
   Every other stylesheet consumes these tokens; do not hard-code values there.
   ========================================================================== */

:root {
  /* Brand (sampled from the supplied SBS mark) */
  --brand-navy: #063b76;
  --brand-teal: #04afba;
  --brand-orange: #ff8000;

  /* Neutrals */
  --gray-0: #ffffff;
  --gray-25: #fbfcfd;
  --gray-50: #f6f8fa;
  --gray-100: #eef1f5;
  --gray-150: #e5e9ef;
  --gray-200: #dbe1e8;
  --gray-300: #c4ccd6;
  --gray-400: #98a3b2;
  --gray-500: #6b7686;
  --gray-600: #4f5a69;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111a2c;

  /* Semantic palette */
  --primary-50: #eef4fc;
  --primary-100: #dbe8f8;
  --primary-200: #b5cff0;
  --primary-500: #1f5fb8;
  --primary-600: #17509f;
  --primary-700: #124183;
  --violet-50: #f3f1fd;
  --violet-100: #e6e1fa;
  --violet-500: #6650c8;
  --violet-700: #4b3a9a;
  --teal-50: #e8f8f9;
  --teal-600: #037f88;
  --green-50: #ecf8f1;
  --green-100: #d3efdf;
  --green-600: #1e8a52;
  --green-700: #17703f;
  --amber-50: #fdf6e7;
  --amber-100: #f9e7bd;
  --amber-600: #b26b00;
  --amber-700: #8f5600;
  --red-50: #fdeeee;
  --red-100: #f9d7d7;
  --red-600: #c5362f;
  --red-700: #a12a24;
  --pink-50: #fcf0f6;
  --pink-600: #b03b7c;

  /* Roles */
  --color-bg: var(--gray-50);
  --color-surface: var(--gray-0);
  --color-surface-muted: var(--gray-25);
  --color-surface-sunken: var(--gray-100);
  --color-border: var(--gray-150);
  --color-border-strong: var(--gray-200);
  --color-text: var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-muted: var(--gray-500);
  --color-heading: #0d2440;
  --color-primary: var(--primary-500);
  --color-primary-hover: var(--primary-600);
  --color-primary-active: var(--primary-700);
  --color-primary-soft: var(--primary-50);
  --color-secondary: var(--violet-500);
  --color-success: var(--green-600);
  --color-warning: var(--amber-600);
  --color-danger: var(--red-600);
  --color-focus: #2f74d0;

  /* Typography */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;     /* 12px metadata */
  --text-sm: 0.8125rem;   /* 13px table data, labels */
  --text-base: 0.875rem;  /* 14px body */
  --text-md: 1rem;        /* 16px card titles */
  --text-lg: 1.125rem;    /* 18px section headings */
  --text-xl: 1.375rem;    /* 22px page titles */
  --text-2xl: 1.75rem;    /* 28px display numbers */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Spacing (4px grid) */
  --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;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(16, 32, 56, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 32, 56, 0.07), 0 1px 2px rgba(16, 32, 56, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 32, 56, 0.08), 0 2px 4px rgba(16, 32, 56, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 32, 56, 0.14), 0 4px 8px rgba(16, 32, 56, 0.06);
  --shadow-focus: 0 0 0 3px rgba(47, 116, 208, 0.28);

  /* Control sizing */
  --control-h: 36px;
  --control-h-sm: 30px;
  --control-h-lg: 44px;
  --icon-size: 18px;
  --icon-size-sm: 16px;

  /* Layout */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --header-h: 60px;
  --content-max: 1440px;
  --drawer-w: 560px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;

  /* Layers */
  --z-sticky: 10;
  --z-sidebar: 40;
  --z-dropdown: 60;
  --z-drawer: 70;
  --z-modal: 80;
  --z-toast: 90;
}

/* ----- Reset --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; border-spacing: 0; }

[hidden] { display: none !important; } /* the one sanctioned !important: hidden must always win */

/* ----- Body & typography ---------------------------------------------------- */
body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--color-heading);
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }

small { font-size: var(--text-xs); }
strong { font-weight: var(--weight-semibold); }
code, kbd { font-family: var(--font-mono); font-size: 0.92em; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; }

::selection { background: var(--primary-100); }

/* ----- Forms (global defaults; component classes refine) --------------------- */
input, select, textarea { border-radius: var(--radius-md); }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--gray-400); }
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
}
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }

/* ----- Accessibility ----------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.skip-link:focus { top: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; /* reduced-motion override must beat component transitions */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}