/*
 * Design tokens, reset, and layout primitives.
 *
 * This is the shared look for the whole super app: a new tool should start from
 * this file so the tools feel like one product. Telegram supplies the viewer's
 * own theme through --tg-theme-* properties, and every token falls back to a
 * sensible value when the app is opened in an ordinary browser.
 */

:root {
    color-scheme: light dark;

    --plane: var(--tg-theme-secondary-bg-color, #f2f2f7);
    --surface: var(--tg-theme-bg-color, #ffffff);

    --ink: var(--tg-theme-text-color, #0b0b0b);
    --ink-soft: var(--tg-theme-subtitle-text-color, #52514e);
    --ink-muted: var(--tg-theme-hint-color, #78776f);

    --accent: var(--tg-theme-button-color, #2a78d6);
    --accent-ink: var(--tg-theme-button-text-color, #ffffff);
    --link: var(--tg-theme-link-color, #2a78d6);
    --danger: var(--tg-theme-destructive-text-color, #d03b3b);

    --hairline: rgba(11, 11, 11, 0.12);
    --ghost: rgba(11, 11, 11, 0.05);

    /* Budget states. Always accompanied by the written percentage, so colour
       is never the only thing carrying the meaning. */
    --state-on-track: #0ca30c;
    --state-nearly-spent: #fab219;
    --state-overspent: #d03b3b;

    /* Categorical slots, assigned alphabetically and never reused. Validated
       for colour-blind separation and contrast against both surfaces. */
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
    --series-4: #eda100;
    --series-5: #e87ba4;
    --series-6: #008300;
    --series-7: #4a3aa7;
    --series-8: #e34948;
    --series-neutral: #8a8a8a;

    /* How a transaction was paid for. Its own pair rather than borrowed series
       slots, which belong to categories and would collide on the same screen. */
    --paid-cash: #1f9d55;
    --paid-visa: #4a3aa7;

    --radius: 16px;
    --radius-small: 11px;
    --gap: 12px;
    --pad: 16px;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --tabbar-height: 58px;
    --tabbar-inset: 12px;
    --fab-size: 56px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --plane: var(--tg-theme-secondary-bg-color, #0d0d0d);
        --surface: var(--tg-theme-bg-color, #17212b);
        --ink: var(--tg-theme-text-color, #ffffff);
        --ink-soft: var(--tg-theme-subtitle-text-color, #c3c2b7);
        --ink-muted: var(--tg-theme-hint-color, #9b9a92);
        --hairline: rgba(255, 255, 255, 0.16);
        --ghost: rgba(255, 255, 255, 0.08);

        --series-1: #3987e5;
        --series-2: #d95926;
        --series-3: #199e70;
        --series-4: #c98500;
        --series-5: #d55181;
        --series-6: #008300;
        --series-7: #9085e9;
        --series-8: #e66767;
        --series-neutral: #9a9a9a;

        --paid-cash: #2eb872;
        --paid-visa: #9085e9;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--plane);
    color: var(--ink);
    font: 400 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
    margin: 0;
    font-weight: 650;
    letter-spacing: -0.01em;
}

a {
    color: var(--link);
    text-decoration: none;
}

button,
input,
select {
    font: inherit;
    color: inherit;
}

/* Visible focus, since much of this interface is links and form controls. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.page {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-width: 640px;
    margin: 0 auto;
    padding: var(--pad);
    padding-bottom: calc(var(--tabbar-height) + var(--tabbar-inset) + var(--safe-bottom) + var(--pad));
}

.page--centred {
    min-height: 80vh;
    justify-content: center;
    padding-bottom: var(--pad);
}

.muted {
    color: var(--ink-muted);
    font-size: 13.5px;
}

.centred {
    text-align: center;
}

.overspent {
    color: var(--state-overspent);
    font-weight: 600;
}

/* Keeps an amount whole when the line around it wraps: "EGP" must never end a
   line with its figure on the next. */
.nobreak {
    white-space: nowrap;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}