/*
 * Variables of the online booking: the master data of its design (colours, spacing, type, radii, shadows).
 *
 * Colour tokens come in two layers:
 *  - neutral surface/ink/status tokens (this file, light and dark);
 *  - operator tokens `--op-*`: the accent of the center. They are set at runtime by app/theme/operator-theme.js (validated hex values,
 *    contrast checked for text and focus rings). The values below are only what a page shows before that happens.
 */

:root {
    color-scheme: light;

    /* operator accent (defaults = platform orange) */
    --op-accent: #ff5500;
    --op-accent-hover: #e04b00;
    --op-accent-pressed: #c74200;
    --op-on-accent: #ffffff; /* white while it reaches 3.2:1 on the accent (#ff5500: 3.21:1), black on lighter ones (js/core/theme.js textOn) */
    --op-accent-ink: #c74200;
    --op-accent-ring: #fa5300;
    --op-accent-soft: #ffeee6;
    --op-accent-soft-border: #ffc4a6;

    /* gradients of the operator accent: the same hue, a touch lighter to a touch deeper (text contrast stays that of
       --op-on-accent on --op-accent) */
    --op-gradient: linear-gradient(135deg, color-mix(in srgb, var(--op-accent) 92%, #ffffff) 0%, var(--op-accent) 50%, color-mix(in srgb, var(--op-accent) 92%, #000000) 100%);
    --op-gradient-hover: linear-gradient(135deg, color-mix(in srgb, var(--op-accent-hover) 92%, #ffffff) 0%, var(--op-accent-hover) 50%, color-mix(in srgb, var(--op-accent-hover) 92%, #000000) 100%);
    --op-glow: color-mix(in srgb, var(--op-accent) 32%, transparent);
    --page-glow: radial-gradient(120% 22rem at 50% 0, color-mix(in srgb, var(--op-accent) 7%, transparent) 0%, transparent 100%);

    /* surfaces */
    --bg-page: #f4f5f7;
    --bg-card: #ffffff;
    --bg-subtle: #f7f8fa;
    --loader-ring: #dddddd;
    --loader-head: #555555;
    --bg-muted: #eceff3;
    --bg-inverse: #1b1f24;

    /* text */
    --ink: #1b1f24;
    --ink-muted: #556070;
    --ink-faint: #94a0b4;
    --ink-inverse: #ffffff;

    /* lines */
    --line: #d9dde3;
    --line-strong: #b4bcc8;

    /* status (text colours reach 4.5:1 on their *-bg) */
    --success: #11693a;
    --success-bg: #e5f4ea;
    --success-line: #a9d8b9;
    --warning: #7d4a00;
    --warning-bg: #fff3dc;
    --warning-line: #f0cf8e;
    --attention-line: #e5b000; /* a preselection that could not be taken: choose here */
    --danger: #bb0b00;
    --danger-strong: #bb0b00; /* a red area with white text (6.6:1), the same in both schemes */
    /* illustrations (online/lib/OnlineIllustration.php): dark objects, paper, lines, decoration (the pill: the tone of the picture) */
    --illu-dark: #3b4347;
    --illu-dark-2: #4a5358;
    --illu-sheet: #ffffff;
    --illu-line: #d9dde1;
    --illu-dark-line: #6b757b;
    --illu-deco: #cfd8d2;
    --illu-plane: #cdd2d6;
    --illu-plane-2: #a9b0b6;
    --illu-chip: #e5c46b;
    --danger-bg: #fdecea;
    --danger-line: #f1b5b0;
    --info: #0b559c;
    --info-bg: #e8f1fb;
    --info-line: #b4d0ee;

    /* the payment itself (payment method card of the payment page): a reassuring green instead of the colour of the
       operator; white text on --secure reaches 6.5:1, --secure-ink on the card 6.5:1 */
    --secure: #11693a;
    --secure-hover: #0d5a31;
    --secure-pressed: #0a4a28;
    --secure-ink: #11693a;
    --secure-ring: #11693a;

    /* shape */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* elevation */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-md: 0 4px 14px rgba(16, 24, 40, .08);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .16);
    --shadow-card: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(16, 24, 40, .14);

    /* spacing scale */
    --s-1: .25rem;
    --s-2: .5rem;
    --s-3: .75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;

    /* type */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* card data (payment page): the page font; system fonts only - the secured card fields of Adyen (iframes) cannot load
       web fonts */
    --font-card: var(--font);
    --fs-xxs: .6125rem;
    --fs-xs: .8125rem;
    --fs-sm: .875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --lh: 1.5;

    /* controls */
    --control-h: 3rem;      /* 48px touch target */
    --control-h-sm: 2.5rem; /* 40px */

    /* motion */
    --t: 140ms;
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* layout */
    --content-max: 40rem;
    --focus: 0 0 0 3px var(--bg-card), 0 0 0 5px var(--op-accent-ring);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg-page: #14161a;
    --bg-card: #1e2127;
    --bg-subtle: #23272e;
    --loader-ring: #3a404a;
    --loader-head: #c8ccd3;
    --bg-muted: #2a2f37;
    --bg-inverse: #eceff3;

    --ink: #eceff3;
    --ink-muted: #b4bcc8;
    --ink-faint: #97a1b0;
    --ink-inverse: #14161a;

    --line: #353b45;
    --line-strong: #4c5461;

    --success: #7fd6a0;
    --success-bg: #17301f;
    --success-line: #2d5b3d;
    --warning: #f5c87a;
    --warning-bg: #352a14;
    --warning-line: #6a5226;
    --attention-line: #e8b931;
    --danger: #ff9b93;
    --danger-strong: #bb0b00;
    --illu-dark: #5b656c;
    --illu-dark-2: #6c777e;
    --illu-sheet: #e8ecef;
    --illu-line: #b8c0c6;
    --illu-dark-line: #8c969c;
    --illu-deco: #3f4b45;
    --illu-plane: #6f7a81;
    --illu-plane-2: #899399;
    --illu-chip: #c9a94e;
    --danger-bg: #3a1a18;
    --danger-line: #7a3732;
    --info: #8fc1f2;
    --info-bg: #14283b;
    --info-line: #2f5679;

    /* white text on --secure 5:1, --secure-ink on the dark card > 9:1, the ring > 3:1 */
    --secure: #15803d;
    --secure-hover: #116c33;
    --secure-pressed: #0d5a2a;
    --secure-ink: #7fd6a0;
    --secure-ring: #4ade80;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .55);
    --page-glow: radial-gradient(120% 22rem at 50% 0, color-mix(in srgb, var(--op-accent) 9%, transparent) 0%, transparent 100%);
    --focus: 0 0 0 3px var(--bg-card), 0 0 0 5px var(--op-accent-ring);
}