/* fabqueue design tokens. Re-exportable to React Native as a JS theme module
   when/if the mobile app lands — see project_frontend_stack_decision.md. */
:root {
    --color-bg: #f7f7f8;
    --color-surface: #ffffff;
    --color-border: #d6d8dc;
    --color-text: #1f2328;
    --color-text-muted: #57606a;
    --color-accent: #2f81f7;
    /* Semantic status colors (text/accents on the light surface). Several
       templates referenced --color-success / --color-warn with hardcoded
       fallbacks before these were defined; they now resolve to the token. */
    --color-success: #1a7f37;
    --color-warn: #b58900;

    /* Machine-state colors. Severity (worst → best): ERROR > PAUSED > OFFLINE > RUNNING > IDLE. */
    --color-machine-ERROR:   #d93636;
    --color-machine-PAUSED:  #d97706;
    --color-machine-OFFLINE: #6b7280;
    --color-machine-RUNNING: #2563eb;
    --color-machine-IDLE:    #16a34a;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;

    --radius-s: 4px;
    --radius-m: 8px;

    --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --type-s: 12px;
    --type-m: 14px;
    --type-l: 16px;
    --type-xl: 20px;
}

/* Universal keyboard-focus ring. tokens.css is the one stylesheet loaded on
   every page (app, machines, floor-plan all load it), so this base a11y rule
   lives here. :focus-visible shows the ring for keyboard/AT navigation only,
   not on mouse click, and covers custom-styled controls (.app-btn, .m-sort,
   etc.) that otherwise had no visible focus state. */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}