/* ──────────────────────────────────────────────────────────────────────────
   Studio design tokens.

   Compact is the only density in M1: 13px base, 28px controls, 32px rows, a 4px
   grid, and hairlines instead of shadows. The two accent colours are the ones a
   pre-press person already reads on the PDF — trim blue and bleed red — so the
   screen and the print file speak the same language.

   Archivo is named as the intended face but is not yet self-hosted; until the
   woff2 lands we ride the system UI stack, which is metrically close enough at
   13px and costs no request.
   ────────────────────────────────────────────────────────────────────────── */
:root {
    /* Surface */
    --st-bg:          #F6F7F9;
    --st-surface:     #FFFFFF;
    --st-surface-2:   #FAFBFC;
    --st-rail:        #0F1733;
    --st-rail-hover:  #1B2440;

    /* Ink */
    --st-ink:         #141A22;
    --st-ink-2:       #5A6573;
    --st-ink-3:       #8B95A3;
    --st-ink-invert:  #E8ECF2;

    /* Line — hairlines carry the structure; shadows are used almost nowhere */
    --st-line:        #E3E7EC;
    --st-line-2:      #CED5DE;

    /* Brand. Rail navy since 4 Oct 2026 (no accent colour; white ink); the designer re-declares these per store (Branding::cssVars). Was: Photiles yellow -- the shop's own --primary (#e6bc28) -- for what you press and
       where you are: primary buttons, the lit menu item, the current tab, toggles that are on.
       Text on it is DARK: the shop sets white on this yellow, which reads at under 2:1. */
    --st-primary:        #0F1733;
    --st-primary-hover:  #1B2440;
    --st-primary-ink:    #FFFFFF;
    --st-primary-soft:   #ECEEF4;
    --st-primary-strong: #0F1733;

    /* Meaning. Trim blue and bleed red are lifted from the print file -- and stay: they are the
       colours a pre-press person reads on the proof, not the brand. */
    --st-trim:        #1B57C4;
    --st-trim-soft:   #E8EFFC;
    --st-bleed:       #C42B1B;
    --st-bleed-soft:  #FCEBE9;
    --st-face:        #1B9A4C;
    --st-face-soft:   #E7F6ED;
    --st-safe:        #E5484D;   /* the shopper's safe line in the designer, and its legend swatch (13 Oct 2026) */
    --st-safe-tint:   rgba(46,58,110,.13);   /* the band outside it: "The tinted edge may be trimmed" (designer v2 slice 4) */
    --st-warn:        #B7791F;
    --st-warn-soft:   #FDF4E3;

    /* Type */
    --st-font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --st-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --st-fs:      13px;
    --st-fs-sm:   12px;
    --st-fs-xs:   11px;
    --st-fs-lg:   15px;
    --st-fs-xl:   19px;

    /* Metrics — every spacing value is a multiple of 4 */
    --st-s1: 4px;  --st-s2: 8px;  --st-s3: 12px; --st-s4: 16px;
    --st-s5: 20px; --st-s6: 24px; --st-s8: 32px;
    --st-rail-w:  44px;
    --st-bar-h:   44px;
    --st-control: 28px;
    --st-row:     32px;
    --st-radius:  5px;
    --st-radius-lg: 8px;

    --st-focus: 0 0 0 3px rgba(27, 87, 196, .22);

    /* Photiles' gold and navy, so Studio and the shop's designer read as one product. These were
       USED in studio.css and defined nowhere, which made the save confirmation white text on a
       transparent background. A save that reports itself in a colour that does not exist is
       indistinguishable from one that failed -- and it was reported as "Save doesn't work". */
    --st-selected:   #E6BC29;
    --st-selected-2: #1B2838;
    --st-idle:       rgba(27, 40, 56, .16);
}