/* ============================================================
   Outlet Village Theme — global tokens only.
   Component styles live in
   Components/Pages/Topup/OutletVillageTopup.razor.css
   (scoped CSS wins on specificity, so keep them there, not here)
   ============================================================ */

:root {
    --ov-bg-dark: #1C2039;
    --ov-card-bg: #3D4056;
    /* --ov-primary-accent is the BRAND colour: every selected control, the
       submit button and the checkbox ticks read from it. --ov-primary-dark is
       the neutral an UNSELECTED control falls back to. (These two comments used
       to say the opposite, which is what made the other themes come out with
       their selected and unselected states swapped.) */
    --ov-primary-accent: #97B4DE; /* light blue — SELECTED / brand */
    --ov-primary-dark: #1C2039;   /* dark blue  — UNSELECTED / neutral */
    --ov-input-bg: #D9D9D9;
    --ov-input-text: #1C2039;
    --ov-label-text: #FFFFFF;
    --ov-text-white: #FFFFFF;

    /* HMPangram leads the stack: it is bundled (@font-face in app.css, loaded
       for every tenant) and it is the face that draws the Mtavruli caps range
       U+1C90-1CBA in the card title the way the design wants. Noto Sans
       Georgian has those glyphs too but a different look, so it serves as the
       Georgian fallback only. FiraGO is not bundled at all, and "Fira Sans
       Georgian" is NOT a real Google Fonts family (the API 400s on it and
       silently drops it from the multi-family request in App.razor).

       Note: app.css declares HMPangram at 100/200/300/500/700/800/900/950 —
       there is no 400 face, so the 350-weight labels resolve to the 300 Light. */
    --ov-font: 'HMPangram', 'FiraGO', 'Noto Sans Georgian', 'Inter', system-ui, sans-serif;

    /* Field metrics — Figma values at the container's 2099px -> 1050px (0.5) scale */
    --ov-field-width: 360px;
    --ov-input-height: 33px;
    --ov-input-radius: 14px; /* Figma border-radius: 30px */

    /* ------------------------------------------------------------------
       Shared theme tokens (see themes/THEMING_GUIDE.md). These drive the
       pages that are NOT tenant-specific components — most importantly
       /payment/success, which is where card payments land after the UFC
       redirect. Without them that page renders with undefined variables.
       ------------------------------------------------------------------ */
    --font-primary: var(--ov-font);
    --font-heading: var(--ov-font);

    --primary-color: #97B4DE;
    --primary-hover: #A8C1E4;
    --primary-light: #2A3050;
    --primary-dark: #1C2039;
    --primary-border: #97B4DE;

    --success-color: #97B4DE;
    --success-light: rgba(151, 180, 222, 0.12);
    --success-border: #97B4DE;
    --success-highlight: #97B4DE;
    --error-color: #FF8A8A;

    --background-color: #1C2039;
    --surface-card: #3D4056;
    --secondary-color: #3D4056;
    --button-text-color: #FFFFFF;
    --text-main: #FFFFFF;
    --text-muted: #A9B0C4;

    --border-radius: 16px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);

    --transition-smooth: 0.3s ease-in-out;
    --disabled-bg: rgba(151, 180, 222, 0.12);
    --disabled-color: #97B4DE;
    --disabled-border: #4B4F5A;
    --section-border: transparent;
    --section-card-bg: #34373D;
}

/* Shared pages (e.g. /payment/success) use .page-shell rather than the
   tenant component, so give them the Outlet surface explicitly. */
.page-shell {
    background-color: var(--surface-card);
    color: var(--text-main);
    border-radius: var(--radius-lg);
}

.page-shell .header-title,
.page-shell h3,
.page-shell h4,
.page-shell h5,
.page-shell .msg {
    color: var(--text-main);
}

body {
    background-color: var(--ov-bg-dark) !important;
    margin: 0;
    padding: 0;
    font-family: var(--ov-font);
}