/*
 * The shared design system's tokens (change merch-41a, design decision 7; built first by merch-37b under M-249, at the path and with the
 * contract 41a names). Every redesigned screen sits under `.el-ds` and reads these custom properties; merch-38a adds the till's tokens
 * (chips, dark panel) without renaming these. Values from the owner's designs and merch-22's purchase card, which are one family.
 * The frame — the header and the rail, `.el-ds.el-frame` — reads the same ones (change merch-47, design decision 2).
 */
.el-ds {
    --el-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --el-accent: #2f7a68;
    --el-accent-hover: #26665a;
    --el-accent-soft: #e6f2ef;
    --el-on-accent: #ffffff;

    --el-surface: #ffffff;
    --el-surface-muted: #f8f9fb;
    --el-surface-sunken: #eef1f4;
    --el-page: #f2f3f8;

    --el-text: #1f2937;
    --el-text-secondary: #5b6472;
    --el-text-label: #374151;
    --el-text-hint: #6b7280;

    --el-border: #dfe3e8;
    --el-border-field: #cfd5dc;
    --el-border-soft: #e5e9ee;
    --el-separator: #eef1f4;

    --el-ok: #0f6b47;
    --el-ok-bg: #e6f4ee;
    --el-warn: #8a5410;
    --el-warn-bg: #fdf2e3;
    --el-info: #1f5fa8;
    --el-info-bg: #e8f1fb;
    --el-danger: #9b2c3c;
    --el-danger-bg: #fdecef;
    --el-danger-border: #c43b4e;

    --el-focus: #2a6fc0;
    --el-focus-ring: rgba(42, 111, 192, .18);

    --el-radius-sm: 4px;
    --el-radius: 6px;
    --el-radius-lg: 10px;
    --el-radius-pill: 999px;

    --el-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --el-shadow-dialog: 0 20px 40px rgba(16, 24, 40, .18);

    /* The till's tokens (change merch-38a, design decision 2; the research's §0.1): the chips' pairs, the search mark and the dark
       panel's scale. The till's accent, text and borders are the ones above: where its design draws them a shade apart (#2E7D6B,
       #16211F, #E2E8E6), the value 41a shipped wins and `till.css` says so. */
    --el-chip-unpaid-bg: #fef3e2;
    --el-chip-unpaid-fg: #9a4d0b;
    --el-chip-paid-bg: #e6f2ee;
    --el-chip-paid-fg: #1f5f51;
    --el-chip-place-bg: #f0f3f2;
    --el-chip-place-fg: #4f5f5b;
    --el-chip-quick-bg: #f3eefa;
    --el-chip-quick-fg: #5b3a8a;
    --el-chip-article-bg: #e8effa;
    --el-chip-article-fg: #1e4e9c;
    --el-chip-book-bg: #e6f2ee;
    --el-chip-book-fg: #1f5f51;
    --el-mark: #fde68a;

    --el-dark: #1e2a2b;
    --el-dark-inner: #162022;
    --el-dark-raised: #28383a;
    --el-dark-raised-hover: #2f4244;
    --el-dark-border: #34484a;
    --el-dark-border-strong: #3e5456;
    --el-dark-muted: #a7b6b3;
    --el-dark-muted-strong: #d5dedc;
    --el-dark-text: #f2f5f4;
    --el-dark-accent: #7fc3b2;
    /* The frame's chevrons and icon buttons (change merch-47, design decision 2; the article card design's #5F6E6A and #C9D4D1). */
    --el-dark-faint: #5f6e6a;
    --el-dark-icon: #c9d4d1;
    --el-dark-hover: rgba(255, 255, 255, .08);

    --el-radius-card: 14px;
    --el-radius-panel: 16px;
    --el-radius-field: 8px;
    --el-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

    font-family: var(--el-font);
    color: var(--el-text);
}

/* The frame's typeface is the design's Manrope (change merch-47, design decision 3); the screens keep theirs until their own redesign. */
.el-ds.el-frame {
    --el-font: "Manrope", "Segoe UI", system-ui, sans-serif;
}

.el-ds :focus-visible {
    outline: 2px solid var(--el-focus);
    outline-offset: 2px;
}