@font-face {
    font-family: "Benton Mod Text";
    font-style: normal;
    font-weight: 400;
    src: url("/css/fonts/BentonModernTextRegular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Benton Mod Text";
    font-style: italic;
    font-weight: 400;
    src: url("/css/fonts/BentonModernTextItalic.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Benton Mod Text";
    font-style: normal;
    font-weight: 700;
    src: url("/css/fonts/BentonModernTextBold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Titling Gothic FB Cond";
    font-style: normal;
    font-weight: 500;
    src: url("/css/fonts/TitlingGothicFB_CondensedMedium.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Titling Gothic FB Cond";
    font-style: normal;
    font-weight: 700;
    src: url("/css/fonts/TitlingGothicFB_CondensedBold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Titling Gothic FB Comp";
    font-style: normal;
    font-weight: 500;
    src: url("/css/fonts/TitlingGothicFB_CompressedMedium.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Monosten";
    font-style: normal;
    font-weight: 400;
    src: url("/css/fonts/Monosten-C.woff2") format("woff2");
    font-display: swap;
}

:root {
    --app-font-family: "Benton Mod Text", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
    --app-font-body: "Benton Mod Text", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
    --app-font-heading: "Titling Gothic FB Cond", "Arial Narrow", "Nimbus Sans Narrow", "Helvetica Neue", Arial, sans-serif;
    --app-font-ui: "Titling Gothic FB Comp", "Titling Gothic FB Cond", "Arial Narrow", "Nimbus Sans Narrow", "Helvetica Neue", Arial, sans-serif;
    --app-font-mono: "Monosten", "Consolas", "Monaco", "Liberation Mono", "Courier New", monospace;
    --app-heading-letter-spacing: 0.03em;
    --app-title-main-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.4rem);
    --app-title-main-weight: 700;
    --app-title-main-letter-spacing: 0.03em;
    --app-title-main-line-height: 1.1;
    --app-copy-color: #353535;
    --app-copy-intro-size: 1.125rem;
    --app-copy-intro-letter-spacing: 0.02em;
    --app-copy-intro-line-height: 1.35;
    --app-copy-card-size: 1rem;
    --app-copy-card-letter-spacing: 0.02em;
    --app-copy-card-line-height: 1.35;
    --app-account-max-width: 72rem;
    --app-account-gap: 0.9rem;
    --app-account-sidebar-min: 17rem;
    --app-account-sidebar-max: 22rem;
    --app-account-panel-padding: 1.2rem;
    --app-account-muted-size: 0.82rem;
    --app-account-chip-bg: rgba(39, 234, 199, 0.2);
    --app-account-chip-text: #1f2a2f;
    --app-account-badge-success-bg: rgba(39, 234, 199, 0.22);
    --app-account-badge-success-text: #1f2a2f;
    --app-account-badge-neutral-bg: rgba(53, 53, 53, 0.14);
    --app-account-badge-neutral-text: #353535;
    --app-account-row-border: #cfcfcf;
    --app-token-max-width: 48rem;
    --app-token-gap: 0.85rem;
    --app-token-card-padding: 1.2rem;
    --app-token-icon-size: 2rem;
    --app-auth-userpass-label-width: 6rem;
    --app-auth-userpass-column-gap: 0.35rem;
    --app-auth-userpass-input-height: 1.8rem;
    --app-auth-userpass-input-padding-y: 0.2rem;
    --app-auth-userpass-input-padding-x: 0.5rem;
    --app-bg: #f8f8f8;
    --app-text: #353535;
    --app-muted: #5d5d5d;
    --app-surface: #ffffff;
    --app-surface-soft: #f4f4f4;
    --app-border: #353535;
    --app-primary: #27eac7;
    --app-primary-hover: #16e2bd;
    --app-primary-contrast: #1f2a2f;
    --app-link: #0f7d88;
    --app-link-hover: #0b5f67;
    --app-nav-bg: rgba(15, 15, 15, 0.95);
    --app-nav-border: #2f2f2f;
    --app-nav-text: #ffffff;
    --app-card-radius: 0;
    --app-button-radius: 0;
    --app-input-radius: 0;
    --app-shadow-card: 0 6px 14px rgba(0, 0, 0, 0.1);
    --app-shadow-card-hover: 0 9px 16px rgba(0, 0, 0, 0.14);
    --app-shadow-button: none;
    --app-focus-ring: #27eac7;
    --app-language-trigger-bg: rgba(18, 18, 18, 0.92);
    --app-language-trigger-border: #444444;
    --app-language-menu-bg: rgba(16, 16, 16, 0.96);
    --app-language-menu-border: #3a3a3a;
    --app-language-option-text: #f1f1f1;
    --app-language-option-hover-bg: rgba(255, 255, 255, 0.08);
    --app-language-option-active-bg: rgba(39, 234, 199, 0.22);
    --app-language-check: #27eac7;
    --app-shell-bg:
        radial-gradient(circle at 10% -8%, rgba(39, 234, 199, 0.16) 0, rgba(39, 234, 199, 0) 37%),
        linear-gradient(180deg, #f8f8f8 0%, #f3f5f6 100%);
}

.app-shell .card.bg-gray-800 {
    border: none;
    background: #e8e8e8 !important;
    box-shadow: none;
}

.app-shell .card.bg-gray-800:hover {
    transform: none;
}

.app-shell .btn {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
    font-size: 1rem;
}

.app-shell h1,
.app-shell h2,
.app-shell h3,
.app-shell h4,
.app-shell .card-title {
    line-height: 1.1;
}

.app-shell {
    letter-spacing: 0.02em;
    line-height: 1.35;
}

/* Match card body text face to card titles, but keep it non-bold. */
.app-shell .theme-copy-card {
    font-family: var(--app-font-heading);
    font-weight: 500;
}

.app-shell .btn.bg-cyan-700,
.app-shell .btn.bg-cyan-700:focus {
    border-width: 2px;
}

.app-shell .btn.bg-cyan-700:hover,
.app-shell .btn.bg-cyan-700:active {
    text-decoration: underline;
}

.language-selector-trigger,
.language-selector-menu {
    border-radius: 0;
}

.language-selector-option {
    border-radius: 0;
}