/*
 * IBM Plex Sans, self-hosted: the typeface Binance built BinancePlex on. Used for every figure.
 * latin-ext carries the naira sign (U+20A6); the browser only fetches it when a page needs it.
 */

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-ext-500.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-ext-600.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-ext-700.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --color-document-ink: #07142e;
    --color-document-muted: #586176;
    --color-document-icon-bg: #e6f3ff;
    --color-document-star-empty: #d8dce4;
    --color-review-star: #ffbd08;
    color-scheme: dark;

    /*
     * Sky glass. Field colours sampled from the "Welcome Back" reference: #1b54e1 brightening to
     * #4087fb under the top edge, with thin concentric rings off the right edge. Gold, taken from the
     * mines Collect key, is the one action colour, so every primary step on every page looks the same.
     */
    --color-action: #ffa11f;
    --color-action-hover: #ffb53d;
    --color-action-press: #f07800;
    --color-action-light: #ffd66b;
    /* Gold readable as text, icon or outline on the blue (4.5:1 on the brightest part of the field). */
    --color-action-text: #ffe9a8;
    /* Ink for anything sitting on a gold fill. */
    --color-on-action: #341400;
    --color-action-soft: rgba(255, 214, 107, 0.18);
    --color-action-glow: rgba(255, 161, 31, 0.5);
    /* White community invitation, with the same solid blue as withdrawal confirmation. */
    --color-dialog-paper: #fff;
    --color-dialog-ink: #151515;
    --color-dialog-muted: #626262;
    --color-dialog-secondary: #f4f4f4;
    --color-dialog-border: #e9e9e9;
    --color-dialog-scrim: rgb(0 0 0 / 55%);
    --color-blue-action: #2459e6;
    --color-page-backdrop: #1446c4;
    --color-bg: #1b54e1;
    --color-surface-subtle: rgb(255 255 255 / 8%);
    --color-surface: rgb(255 255 255 / 12%);
    --color-surface-raised: rgb(255 255 255 / 18%);
    --color-sheet: #1f5ae6;
    --color-field-bg: rgb(6 30 120 / 28%);
    --color-border: rgb(255 255 255 / 24%);
    --color-border-subtle: rgb(255 255 255 / 13%);
    /*
     * Behind a modal the page is dimmed, not tinted: a near-black navy, so the sheet on top stays the
     * only blue thing in view. Sheets themselves are opaque; glass is for cards that sit on the page.
     */
    --color-overlay: rgba(3, 10, 34, 0.62);
    --color-scrim: #030a22;
    --sheet-bg: linear-gradient(180deg, #2a64ee 0%, #1b50d8 100%);
    --sheet-border: rgb(255 255 255 / 16%);
    --color-toast: #0f2f96;
    --color-nav-bg: rgba(24, 78, 222, 0.94);
    --color-header-scrim: rgba(27, 84, 225, 0.9);
    --color-icon: #ffffff;
    --color-brand-accent: #ffd66b;
    --color-text: #ffffff;
    --color-text-muted: #e3edff;
    --color-text-dim: #c6d8ff;
    /* Status colours are lifted pale so they still read on the bright field. */
    --color-success: #9bffc0;
    --color-success-bg: rgba(74, 222, 128, 0.2);
    --color-danger: #ffc2c2;
    --color-danger-bg: rgba(255, 110, 110, 0.22);
    --color-warning: #ffe08a;
    --color-warning-bg: rgba(255, 200, 87, 0.2);
    --color-shadow: rgba(6, 26, 110, 0.35);
    --shadow-header: 0 0.5rem 1.5rem rgba(6, 26, 110, 0.25);

    /*
     * The app background, top to bottom: film grain, the rings, a soft highlight, a glass sheen,
     * the bright bloom under the top edge, then the base blue. It scrolls with the page.
     */
    --app-backdrop:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") left top / 160px 160px repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 440' preserveAspectRatio='xMaxYMin slice'%3E%3Cg fill='none' stroke='%23ffffff'%3E%3Ccircle cx='395' cy='118' r='52' stroke-opacity='.2'/%3E%3Ccircle cx='395' cy='118' r='80' stroke-opacity='.17'/%3E%3Ccircle cx='395' cy='118' r='108' stroke-opacity='.14'/%3E%3Ccircle cx='395' cy='118' r='136' stroke-opacity='.12'/%3E%3Ccircle cx='395' cy='118' r='164' stroke-opacity='.09'/%3E%3Ccircle cx='395' cy='118' r='192' stroke-opacity='.07'/%3E%3Ccircle cx='395' cy='118' r='220' stroke-opacity='.05'/%3E%3C/g%3E%3C/svg%3E") right top / 100% auto no-repeat,
        radial-gradient(60% 16rem at 28% 5rem, rgb(255 255 255 / 8%), transparent 70%) left top / 100% 100% no-repeat,
        linear-gradient(180deg, rgb(255 255 255 / 7%), transparent 22rem) left top / 100% 100% no-repeat,
        radial-gradient(70% 38rem at 62% 0%, rgb(64 135 251 / 85%), transparent 70%) left top / 100% 100% no-repeat,
        linear-gradient(180deg, #2260e9 0%, #1b54e1 32rem, #1a50da 100%) left top / 100% 100% no-repeat;

    /*
     * The mines-game bevel, shared. A block is a lit top face over a solid edge that sits --lift below it;
     * pressing slides the face down onto the edge, so the control reads as a physical key.
     * Plain keys are frosted glass on a navy edge; action keys are the gold Collect key.
     */
    --lift: 0.1875rem;
    --block-face: linear-gradient(180deg, rgb(255 255 255 / 24%), rgb(255 255 255 / 10%));
    --block-edge: rgb(8 34 140 / 60%);
    --block-shine: inset 0 1px 0 rgb(255 255 255 / 38%);
    --block-action-face: linear-gradient(180deg, #ffd66b 0%, #ffa11f 48%, #f07800 100%);
    --block-action-edge: #a04c00;
    --block-action-shine: inset 0 0.125rem 0 rgb(255 255 255 / 60%);
    --block-gold-face: var(--block-action-face);
    --block-gold-edge: var(--block-action-edge);
    --block-gold-ink: var(--color-on-action);
    /* A deep navy key for the one thing on a card that must not compete with gold. */
    --block-navy-face: linear-gradient(180deg, #2a4fd0, #0e2f9e);
    --block-navy-edge: #061a66;

    /* Icon wells: one hue per destination so a row is recognised before it is read. */
    --tint-violet: #ddd4ff;
    --tint-violet-bg: rgba(169, 155, 255, 0.2);
    --tint-sky: #8fd3ff;
    --tint-sky-bg: rgba(100, 188, 255, 0.18);
    --tint-green: #6ee89a;
    --tint-green-bg: rgba(74, 222, 128, 0.16);
    --tint-amber: #ffd166;
    --tint-amber-bg: rgba(255, 200, 87, 0.18);
    --tint-pink: #ffa3d1;
    --tint-pink-bg: rgba(255, 138, 196, 0.16);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.125rem;
    --radius-pill: 999px;

    --font-system: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Figures: balances, prices, amounts. Tabular digits so columns of numbers line up. */
    --font-numeric: "IBM Plex Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: var(--font-numeric);
    /* Smallest legible step, kept for badges that carry an icon beside their wording. */
    --text-2xs: 0.625rem;
    --text-xs: 0.6875rem;
    --text-sm: 0.75rem;
    --text-data: 0.8125rem;
    --text-body: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.875rem;
    --leading-tight: 1.2;
    --leading-body: 1.5;

    /* Close to the edge like a native app: a slim page gutter and snug card padding. */
    --page-gutter: 0.875rem;
    --home-page-gutter: 0.875rem;
    --card-pad: 0.875rem;
    --card-pad-lg: 1rem;
    --section-gap: 1rem;
    --grid-gap: 0.75rem;
    --container-max: 24.375rem;
    --bottom-nav-height: 4.5rem;
    --header-height: 3.5rem;
    --tap-target: 2.5rem;
    --input-height: 3.25rem;
    --transition-fast: 160ms ease;
    --transition-header: 200ms ease-out;
    --ease-out: cubic-bezier(0.25, 0.8, 0.35, 1);
}

@media (max-width: 22.5rem) {
    :root {
        --page-gutter: 0.75rem;
        --home-page-gutter: 0.75rem;
        --card-pad: 0.75rem;
    }
}