/* ====================================================================
   tokens.css — design tokens shared by the internal app and the client
   portal. Served at /css/tokens.css. A colour or a
   radius is defined exactly once.

   Only tokens live here. Layout belongs to whichever app owns the
   screen: the internal app is a dense desktop tool (public/css/base.css),
   the portal is a phone-first page (portal/css/portal.css), and they
   should not try to share a shell.
   ==================================================================== */

:root {
    /* brand + intent */
    --primary: #0066cc;
    --primary-dark: #0052a3;
    --danger: #cc3333;
    --success: #1a7f4b;
    --warning: #b8860b;

    /* surfaces + text */
    --surface: #ffffff;
    --surface-sunken: #f7f7f8;
    --text: #1a1a1a;
    --muted: #666666;
    --border: #dddddd;
    --panel-head: #f4f4f5;
    --overlay-bg: rgba(0, 0, 0, 0.85);

    /* spacing scale */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;

    /* shape + depth */
    --radius: 0.5rem;
    --radius-sm: 0.25rem;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* type */
    --font: system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-size: 1rem;
}