/* staffmor.com v2 tokens (Iris, 14 October 2026). The file every page shares.
   Concept: "Staffmor is a butler with a blue folder." A grand hotel's concierge desk.
   Two kinds of colour live here:
   1. The lobby. A place, not a theme: the same green, counter, plate, copper and cream in BOTH colour schemes,
      as a hotel's lobby is the same at night. These tokens never change with data-theme.
   2. The product. The office has two real appearances, so everything that shows the product (the office inside
      the folder, the Tasks rows, the setup sheet, the order dialog, the Chat capture) follows the visitor's scheme
      through --paper, --ink, --muted, --line and friends. theme.js sets data-theme on <html> before any paint;
      prefers-color-scheme is the fallback before the script runs or without it.
   Fonts: Gabarito (display; Naipe Foundry, SIL OFL; self-hosted at /fonts/), Source Sans 3 (body; self-hosted),
   Source Serif 4 (the product frames' own headings; self-hosted). */

/* Gabarito is one variable file per subset, as Google Fonts serves it (v9): latin and latin-ext, each covering the
   600, 700 and 800 this page uses. Until the two files are in /fonts/, every heading draws in Source Sans 3. */
@font-face{font-family:"Gabarito";src:url("/fonts/gabarito-latin.woff2") format("woff2");font-style:normal;font-weight:600 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Gabarito";src:url("/fonts/gabarito-latin-ext.woff2") format("woff2");font-style:normal;font-weight:600 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";src:url("/assets/fonts/source-sans-3.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}

:root{
  color-scheme:light dark;

  /* ---- the lobby (constant in both schemes) ---- */
  --field:#0f2a1f;          /* the lobby wall: a deep hotel green, not the category's forest-and-paper */
  --field-2:#153627;        /* the office beyond the lobby: one step lighter, the second ground */
  --field-deep:#081b13;     /* the foot and the phone menu: one step deeper */
  --desk-top:#2f6b4b;       /* the counter's top face, where the lamp lands */
  --desk-top-2:#1d4b35;     /* the top face away from the lamp */
  --desk-lip:#8fb79f;       /* the counter's front edge, a lit rim */
  --desk-face:#214c38;      /* the counter's front face: green lacquer, lighter than the wall */
  --desk-face-2:#183d2c;    /* the front face's foot */
  --brass:#c9a35e;          /* the counter's lit brass edge */
  --lamp:255 228 186;       /* the lamp's warm light, as an rgb triple for alpha */
  --cream:#f3ecdc;          /* type on the lobby's green: 13.8:1 */
  --cream-2:#cbc3ae;        /* secondary type on green: 9.3:1 */
  --cream-3:#a79f8c;        /* rules and quiet marks on green: 5.6:1 */
  --copper:#d0743f;         /* ONE job: the action (Choose my team, Get Starter, Continue to checkout); the bow tie's copper */
  --copper-hi:#dc8655;      /* the action, hovered */
  --copper-ink:#0b1f17;     /* type on copper: 5.1:1 */
  --plate:#f3ead8;          /* the name plate, ivory */
  --plate-2:#e2d7c0;        /* the plate's lower edge */
  --plate-ink:#20352f;      /* engraving on the plate */
  --folder:#7cc6f2;         /* the blue folder, the one the demos end in */
  --folder-2:#54a6df;       /* its shaded board */
  --folder-3:#3f8ac4;       /* its spine and thickness */
  --folder-in:#b9e1fa;      /* the inside of the cover */
  --focus:#f0b48c;          /* the focus ring on the lobby: 10.9:1 on the field */

  /* ---- the product (follows the scheme): light values ---- */
  --paper:#fcfdfb;          /* the office's own ground */
  --surface:#ffffff;        /* a sheet that floats on it */
  --card:#eef3ea;           /* the yes-or-no card, the office's pale green */
  --ink:#20352f;            /* the office's ink: 13.4:1 on paper */
  --muted:#59645e;          /* secondary: 6.3:1 on paper */
  --line:#d9ddd3;           /* rules */
  --line-soft:#e9ece6;      /* softer rules between posts */
  --live:#1f6a5e;           /* status: working now (the office's teal, dark enough to read as text: 5.9:1) */
  --live-bright:#57d3e3;    /* status: the working dot's blink */
  --btn:#254c38;            /* the office's own filled button (Yes, go ahead; Answer) */
  --btn-ink:#ffffff;
  --sheet-shadow:0 1px 2px rgba(18,26,30,.06),0 30px 50px -24px rgba(0,0,0,.6);
  --frame-edge:transparent; /* light frames separate from the green on their own */

  /* ---- type ---- */
  --display:"Gabarito","Source Sans 3",Arial,sans-serif;
  --body:"Source Sans 3",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --t-1:clamp(2.75rem,5.7vw,5.125rem); /* h1: 44 to 82 */
  --t-2:clamp(2rem,3.2vw,2.875rem);     /* h2: 32 to 46 */
  --t-3:1.5rem;                          /* h3: 24 */
  --t-4:1.1875rem;                       /* lead: 19 */
  --t-5:1.0625rem;                       /* body: 17 */
  --t-6:.9375rem;                        /* small: 15 */
  --t-7:.8125rem;                        /* floor: 13 */
  --t-ui:.9375rem;                       /* controls: 15 */

  /* ---- space (the 9 steps), radius, grid ---- */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:40px;--s7:64px;--s8:104px;--s9:168px;
  --r-obj:14px;   /* objects: the folder, the frame, the sheet */
  --r-in:8px;     /* things inside objects: the office's card, inputs */
  --r-btn:10px;   /* buttons */
  --r-plate:6px;  /* the plate and small plaques */
  --max:1320px;
  --gutter:max(32px,calc((100vw - var(--max)) / 2));
  --top:72px;     /* the header's height */
  --desk-top-h:40px;  /* the counter's top face */
  --desk-face-h:80px; /* its front face, which carries the name plate and the caption */
  --cols:minmax(0,5fr) minmax(0,7fr); /* the page's two verticals: words left, things right */
}

/* the product's dark appearance: designed from the office's own dark tokens (themes.css), not inverted */
:root[data-theme="dark"]{
  --paper:#15231f;--surface:#1c3029;--card:#213a30;
  --ink:#f3efe4;--muted:#b4c4ba;--line:#3c5147;--line-soft:#2c4037;
  --live:#9ed8c7;--live-bright:#d4f3ea;
  --btn:#f3efe4;--btn-ink:#15231f;
  --sheet-shadow:0 1px 2px rgba(0,0,0,.4),0 30px 50px -24px rgba(0,0,0,.8);
  --frame-edge:#5d7a6b;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15231f;--surface:#1c3029;--card:#213a30;
    --ink:#f3efe4;--muted:#b4c4ba;--line:#3c5147;--line-soft:#2c4037;
    --live:#9ed8c7;--live-bright:#d4f3ea;
    --btn:#f3efe4;--btn-ink:#15231f;
    --sheet-shadow:0 1px 2px rgba(0,0,0,.4),0 30px 50px -24px rgba(0,0,0,.8);
    --frame-edge:#5d7a6b;
  }
}

@media (max-width:720px){
  :root{--top:56px;--gutter:16px;--desk-top-h:30px;--desk-face-h:64px}
}