/*
 * 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
 * typefaces: Arial Rounded MT Bold for display (it matches the logo), Arial
 * for text, IBM Plex Mono for facts.
 *
 * The two brand faces are system fonts. Plex Mono is 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.
 *
 * Scoped to Filament's own custom-property layer so it re-tints the components
 * rather than fighting them.
 */

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

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

    --font-family: Arial, Helvetica, sans-serif;
    --oct-font-display: 'Arial Rounded MT Bold', 'Arial Rounded MT', Arial, Helvetica, sans-serif;
}

html, body, .fi-body {
    font-family: var(--font-family);
}

/*
 * The logo. Black-on-transparent sources drawn as masks over currentColor, so
 * one file serves light mode, dark mode and both panels. The mark sits beside
 * the panel name in the topbar; the signed-out pages get the full lockup.
 */
.oct-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
}

.oct-brand-mark {
    flex: none;
    height: 1.75rem;
    aspect-ratio: 155 / 120;
    background-color: currentColor;
    -webkit-mask: url('/img/oct-mark.png') center / contain no-repeat;
            mask: url('/img/oct-mark.png') center / contain no-repeat;
}

.oct-brand-name {
    font-family: var(--oct-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.oct-brand-lockup {
    display: none;
    height: 7rem;
    aspect-ratio: 480 / 514;
    background-color: currentColor;
    -webkit-mask: url('/img/oct-logo-text.png') center / contain no-repeat;
            mask: url('/img/oct-logo-text.png') center / contain no-repeat;
}

/* Filament sets the logo height inline from brandLogoHeight(); the lockup needs more. */
.fi-simple-header .fi-logo {
    height: auto !important;
}

.fi-simple-header .oct-brand-mark,
.fi-simple-header .oct-brand-name {
    display: none;
}

.fi-simple-header .oct-brand-lockup {
    display: block;
}

/* 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: var(--oct-font-display);
    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; }
}