/*
 * Old Cart portal — brand.
 *
 * The portal is a different application on a different hostname, but it is the
 * same firm, and a client who signs in should not feel handed off to somebody
 * else's software. So this borrows the marketing site's palette and typography
 * exactly: the same paper, the same ink, the same blue, the same three
 * families.
 *
 * Fonts are copied into this application rather than linked across, because the
 * portal's CSP is font-src 'self' and the marketing site is a different origin.
 * That is the policy working as intended.
 *
 * Scoped to Filament's own custom-property layer so it re-tints the components
 * rather than fighting them.
 */

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/fonts/ibm-plex-sans-var-latin.woff2') format('woff2-variations');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Spectral';
    src: url('/fonts/spectral-600-latin.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --oct-paper:  #F4F2EC;
    --oct-ink:    #14181D;
    --oct-rule:   #D6D1C6;
    --oct-rule-2: #BFB8AA;
    --oct-accent: #1E5AC8;

    --font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
}

html, body, .fi-body {
    font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
}

/* The signed-out surface: the first thing a client ever sees of this system. */
.fi-simple-layout {
    background: var(--oct-paper);
}

.fi-simple-main {
    border: 1px solid var(--oct-rule);
    border-radius: 2px;             /* The marketing site does not round things. */
    box-shadow: none;
    background: #fff;
    max-width: 30rem;
}

.fi-simple-header-heading,
.fi-header-heading,
.fi-section-header-heading {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--oct-ink);
}

.fi-simple-header-heading {
    font-size: 1.75rem;
    line-height: 1.2;
}

.fi-simple-header-subheading,
.fi-section-header-description {
    color: #4A5159;
    max-width: 44ch;
}

/* Mono for the things that are facts rather than prose. */
.fi-in-text-item-label,
.fi-ta-text-item-label,
code, kbd, samp {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* The one-time code field: six digits should read as six digits. */
input[autocomplete='one-time-code'] {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.35em;
    text-align: center;
}

/* Square the corners and drop the gradient sheen; the brand is flatter than that. */
.fi-btn {
    border-radius: 2px;
}

.fi-input-wrp {
    border-radius: 2px;
}

@media (prefers-color-scheme: dark) {
    .fi-simple-layout { background: #0F1216; }
    .fi-simple-main   { background: #14181D; border-color: #2A3138; }
    .fi-simple-header-heading { color: #F4F2EC; }
    .fi-simple-header-subheading { color: #A8AFB6; }
}