/* ==========================================================================
   WS-Audit — Design tokens
   Single source of truth. No hard-coded colors, sizes or spacings anywhere
   else in the project. See docs/design-system.md.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand ------------------------------------------------------------
     Sampled from the Webside logo (word/media/image1.jpeg).
     ws-blue-light is logo-only: too pale to carry contrast in UI. */
  --ws-blue:        #00719B;
  --ws-blue-deep:   #005A7C;
  --ws-blue-light:  #B3D5E1;
  --ws-grey:        #A8A8A8;

  /* --- Neutrals --------------------------------------------------------- */
  --ws-ink:         #16212B;
  --ws-muted:       #5C6B77;
  --ws-bg:          #F7F9FA;
  --ws-surface:     #FFFFFF;

  /* Two borders, two jobs — do not swap them.
     ws-line: separators and panel edges. Decorative, deliberately quiet;
       WCAG 1.4.11 does not apply because no control is identified by it.
     ws-line-control: the outline of an input, select or textarea. This IS
       what tells a user where the field is, so it must clear 3:1 on white
       (1.4.11). #84919D = 3.22:1. */
  --ws-line:         #DDE3E8;
  --ws-line-control: #84919D;

  /* Tinted surfaces — derived, used for hover rows and selected states.
     Never used as a fill for content blocks. */
  --ws-blue-wash:   #EDF5F8;
  --ws-row-hover:   #F1F5F7;

  /* --- Semantic --------------------------------------------------------- */
  --ws-ok:          #0E7A4B;
  --ws-warn:        #A05E00;  /* darkened from #B26A00: that failed 4.5:1 on --ws-warn-wash */
  --ws-danger:      #B3261E;
  --ws-neutral:     #5C6B77;

  /* Tints for badge/alert backgrounds. All tested >= 4.5:1 with their ink. */
  --ws-ok-wash:     #E7F3EC;
  --ws-warn-wash:   #FBF1E3;
  --ws-danger-wash: #FBEAE9;
  --ws-neutral-wash:#EFF2F4;

  /* --- Typography -------------------------------------------------------
     One family. Tabular numerals are mandatory on tables and metadata. */
  --ws-font:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ws-text-page:   1.75rem;  /* 28px / 600 — page title           */
  --ws-text-section:1.125rem; /* 18px / 600 — section title        */
  --ws-text-sub:    0.9375rem;/* 15px / 500 — subtitle             */
  --ws-text-body:   0.875rem; /* 14px / 400 — base                 */
  --ws-text-table:  0.8125rem;/* 13px / 400 — tables, labels       */
  --ws-text-meta:   0.75rem;  /* 12px / 500 — badges, metadata     */

  --ws-lh-tight:    1.25;
  --ws-lh-body:     1.55;

  --ws-weight-reg:  400;
  --ws-weight-med:  500;
  --ws-weight-semi: 600;

  /* --- Spacing — strict 4px scale --------------------------------------- */
  --ws-1:  0.25rem;  /*  4px */
  --ws-2:  0.5rem;   /*  8px */
  --ws-3:  0.75rem;  /* 12px */
  --ws-4:  1rem;     /* 16px */
  --ws-6:  1.5rem;   /* 24px */
  --ws-8:  2rem;     /* 32px */
  --ws-12: 3rem;     /* 48px */

  /* --- Radius — nothing above 6px --------------------------------------- */
  --ws-radius-field: 3px;
  --ws-radius-box:   6px;

  /* --- Border ----------------------------------------------------------- */
  --ws-border:       1px solid var(--ws-line);

  /* --- Shadow — the only one in the project. Overlays only. ------------- */
  --ws-shadow-overlay: 0 4px 12px rgba(22, 33, 43, .10);

  /* --- Layout ----------------------------------------------------------- */
  --ws-sidebar-w:    240px;
  --ws-topbar-h:     56px;
  --ws-content-max:  1400px;
  --ws-prose-max:    68ch;
  --ws-row-h:        40px;
  --ws-touch-min:    44px;   /* tablet: every interactive target */

  /* --- Motion — feedback and transitions only --------------------------- */
  --ws-motion:       120ms ease-out;

  /* --- Focus — never removed ------------------------------------------- */
  --ws-focus:        2px solid var(--ws-blue);
  --ws-focus-offset: 2px;

  --ws-z-sticky:  10;
  --ws-z-overlay: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ws-motion: 1ms linear; }
}