/* The colours of every screen, light and dark. The ramps are Unfold's variables,
   set on the panel pages by Unfold and on /receive/ by {% panel_colours %}. */
:root {
    --page: var(--color-base-50);
    --surface: #fff;
    --surface-sunken: var(--color-base-50);
    --ink: var(--color-base-900);
    --text: var(--color-base-600);
    --muted: var(--color-base-500);
    --line: var(--color-base-200);
    --line-strong: var(--color-base-300);
    --accent: var(--color-primary-600);
    --accent-hover: var(--color-primary-700);
    --accent-soft: var(--color-primary-100);
    --accent-text: var(--color-primary-600);
    --on-accent: #fff;
    --radius: var(--border-radius, 6px);

    --ok: #166534;
    --ok-soft: #dcfce7;
    --warn: #9a5b00;
    --warn-soft: #fef3c7;
    --bad: #b91c1c;
    --bad-soft: #fee2e2;
    --info: #1e4e8c;
    --info-soft: #dbeafe;
    --quiet: var(--color-base-600);
    --quiet-soft: var(--color-base-100);

    /* The menu (Unfold's sidebar and top bar, the top bar of /receive/, /product/ and
       /pack/) is a shade apart from the page: about 4 % darker in the light theme,
       about 5 % lighter in the dark one. The page itself keeps its colour.
       The admin's page is white (dark: base-900), the other screens' is --page. */
    --admin-page: #fff;
    --chrome: #f5f5f5;
    --chrome-receive: #efeff0;
    --chrome-line: var(--line-strong);
}

html.dark {
    --page: var(--color-base-900);
    --surface: var(--color-base-900);
    --surface-sunken: var(--color-base-800);
    --ink: var(--color-base-100);
    --text: var(--color-base-300);
    --muted: var(--color-base-400);
    --line: var(--color-base-700);
    --line-strong: var(--color-base-600);
    --accent: var(--color-primary-600);
    --accent-hover: var(--color-primary-500);
    --accent-soft: var(--color-primary-900);
    --accent-text: var(--color-primary-400);

    --ok: #86efac;
    --ok-soft: rgb(34 197 94 / 18%);
    --warn: #fcd34d;
    --warn-soft: rgb(245 158 11 / 18%);
    --bad: #fca5a5;
    --bad-soft: rgb(239 68 68 / 20%);
    --info: #93c5fd;
    --info-soft: rgb(59 130 246 / 20%);
    --quiet: var(--color-base-300);
    --quiet-soft: var(--color-base-800);

    --admin-page: var(--color-base-900);
    --chrome: #1f2430;
    --chrome-receive: #1f2430;
}

/* Where colour mixing exists the shade is computed from the page, so it follows the
   ramps; elsewhere (iOS before 16.2) the plain colours above stay. */
@supports (color: color-mix(in srgb, red, blue)) {
    :root {
        --chrome: color-mix(in srgb, var(--admin-page), black 4%);
        --chrome-receive: color-mix(in srgb, var(--page), black 4%);
    }

    html.dark {
        --chrome: color-mix(in srgb, var(--admin-page), white 5%);
        --chrome-receive: color-mix(in srgb, var(--page), white 5%);
    }
}

/* Unfold's ramps are oklch, which Safari reads from iOS 15.4. The receiving terminal
   is an iPhone 7 Plus: on anything older it gets the light theme in plain colours. */
@supports not (color: oklch(0% 0 0)) {
    :root,
    html.dark {
        --color-primary-400: #7ba3cc;
        --page: #f9fafb;
        --surface: #fff;
        --surface-sunken: #f9fafb;
        --ink: #111827;
        --text: #4b5563;
        --muted: #6b7280;
        --line: #e5e7eb;
        --line-strong: #d1d5db;
        --accent: #2f5d8a;
        --accent-hover: #274e74;
        --accent-soft: #e1eaf3;
        --accent-text: #2f5d8a;
        --ok: #166534;
        --ok-soft: #dcfce7;
        --warn: #9a5b00;
        --warn-soft: #fef3c7;
        --bad: #b91c1c;
        --bad-soft: #fee2e2;
        --info: #1e4e8c;
        --info-soft: #dbeafe;
        --quiet: #4b5563;
        --quiet-soft: #f3f4f6;
        --admin-page: #fff;
        --chrome: #f5f5f5;
        --chrome-receive: #efeff0;
    }
}

/* Languages already on the pack (files-13): green when the order's language is there,
   orange when it is not, grey when the pack languages are not recorded. */
.lang-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lang-chip {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    background: var(--quiet-soft);
    color: var(--quiet);
}
.lang-chip-ok { background: var(--ok-soft); color: var(--ok); }
.lang-chip-missing { background: var(--warn-soft); color: var(--warn); }
.lang-chip-unknown { background: var(--quiet-soft); color: var(--muted); font-weight: 500; }