/* =========================================================
   TechDoctor — Design Tokens
   Loaded BEFORE style.css. Purely additive: every token here
   is one style.css does not already define, so this file
   causes no visual change on its own. Existing brand colours
   in style.css:root remain authoritative.
   ========================================================= */

:root {

    /* ── Spacing scale ───────────────────────────────────
       Replaces ad-hoc margin-left: 37px values. Every gap in
       the UI should resolve to one of these steps.          */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* ── Type scale ──────────────────────────────────────
       Minor third (1.200) on a 16px base. Chosen over a
       larger ratio because clinical UI is dense — headings
       need to separate from body without shouting.         */
    --text-caption: 0.75rem;    /* 12 — timestamps, meta      */
    --text-small:   0.8125rem;  /* 13 — table cells, labels   */
    --text-body:    0.9375rem;  /* 15 — default UI body       */
    --text-base:    1rem;       /* 16 — prose, form inputs    */
    --text-lg:      1.125rem;   /* 18 — card titles           */
    --text-xl:      1.25rem;    /* 20 — h4                    */
    --text-2xl:     1.5rem;     /* 24 — h3                    */
    --text-3xl:     1.875rem;   /* 30 — h2                    */
    --text-4xl:     2.25rem;    /* 36 — h1                    */
    --text-5xl:     3rem;       /* 48 — display               */

    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

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

    --tracking-tight: -0.02em;   /* display headings          */
    --tracking-wide:   0.04em;   /* eyebrows, table headers   */

    /* ── Neutral ramp ────────────────────────────────────
       style.css ships three text colours and one border,
       which forces components to invent their own greys.
       This gives them somewhere legitimate to land.        */
    --neutral-50:  #F7F9FC;
    --neutral-100: #EDF1F7;
    --neutral-200: #DDE3ED;
    --neutral-300: #C3CCDA;
    --neutral-400: #9AA6B8;
    --neutral-500: #71809A;
    --neutral-600: #536077;
    --neutral-700: #3B4759;
    --neutral-800: #26303F;
    --neutral-900: #141B26;

    /* ── Motion ──────────────────────────────────────────
       Four durations, per the brief. Anything that needs a
       fifth is probably doing too much.                    */
    --duration-fast:   150ms;
    --duration-base:   200ms;
    --duration-medium: 250ms;
    --duration-slow:   300ms;

    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Focus ───────────────────────────────────────────
       A single ring definition so keyboard focus looks the
       same on every control in the app.                    */
    --focus-ring-width: 3px;
    --focus-ring-color: rgba(0, 102, 255, 0.45);
    --focus-ring-offset: 2px;

    /* ── Layout ──────────────────────────────────────────  */
    --container-max: 1320px;
    --container-pad: var(--space-6);
    --sidebar-width: 260px;
    --drawer-width: 320px;

    /* ── Touch ───────────────────────────────────────────
       WCAG 2.5.5 target size. Used by design-system.css to
       floor interactive controls on coarse pointers.       */
    --touch-target: 44px;

    /* ── Z-index ladder ──────────────────────────────────
       Named so new components stop guessing at z-index:9999 */
    --z-base:      1;
    --z-sticky:    100;
    --z-header:    200;
    --z-backdrop:  900;
    --z-drawer:    1000;
    --z-modal:     1100;
    --z-toast:     1200;

    /* ── Status surfaces ─────────────────────────────────
       Dashboard pages currently hardcode Material palette
       hexes (#2e7d32, #1565c0, #7b1fa2 …) for status pills.
       These are the sanctioned replacements.               */
    --success-surface: #E9F6EC;
    --success-border:  #BFE3C8;
    --success-text:    #1E6B33;

    --warning-surface: #FFF6E8;
    --warning-border:  #FFE0B2;
    --warning-text:    #96590A;

    --danger-surface:  #FDECEE;
    --danger-border:   #F8C9CF;
    --danger-text:     #A32234;

    --info-surface:    #E8F2FE;
    --info-border:     #C2DCFB;
    --info-text:       #10529B;

    /* ── Clinical severity ───────────────────────────────
       Maps to the reports.severity ENUM. Severity must never
       be carried by colour alone — pair with the icon and
       label already present in view-report.php.            */
    --severity-normal:   #1E6B33;
    --severity-mild:     #8A6410;
    --severity-moderate: #B45309;
    --severity-severe:   #B02A37;
    --severity-critical: #8B1A24;
}