/* Union-owned mirror. Visual tokens follow brand/union.tokens.json. */
@font-face { font-family: "Noto Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/ui/fonts/notosans-regular.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/ui/fonts/notosans-bold.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("/assets/ui/fonts/vazirmatn.woff2") format("woff2"); }
@font-face { font-family: "Cairo"; font-weight: 200 900; font-style: normal; font-display: swap; src: url("/assets/ui/cairo.ttf") format("truetype"); }
:root {
  /* Approved 09.10 artwork palette, for the small brand-value legend. */
  --hamyar-connection: #2FA9DC;
  --hamyar-collaboration: #E97E30;
  --hamyar-business: #D54834;
  color-scheme: light;
  --dafina-font: "Noto Sans", "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--dafina-font);
  --dafina-teal-50: #E8F3F4;
  --dafina-teal-100: #D0E7E8;
  --dafina-teal-200: #A7D0D2;
  --dafina-teal-300: #75B2B5;
  --dafina-teal-400: #459598;
  --dafina-teal-500: #1F8A8A;
  --dafina-teal-600: #176F73;
  --dafina-teal-700: #0F5B63;
  --dafina-teal-800: #0B464D;
  --dafina-teal-900: #08363C;
  --dafina-coral-50: #FFF0ED;
  --dafina-coral-100: #FFDCD5;
  --dafina-coral-200: #FFB8AC;
  --dafina-coral-300: #FB907F;
  --dafina-coral-400: #F57962;
  --dafina-coral-500: #F0644A;
  --dafina-coral-600: #D94E36;
  --dafina-coral-700: #B83B28;
  --dafina-coral-800: #963023;
  --dafina-coral-900: #7C2A21;
  --dafina-amber-50: #FFF4E3;
  --dafina-amber-100: #FEEBD0;
  --dafina-amber-200: #FBD08F;
  --dafina-amber-300: #F9B955;
  --dafina-amber-400: #F5A32B;
  --dafina-amber-500: #EE8C06;
  --dafina-amber-600: #D96C0A;
  --dafina-amber-700: #AD4E03;
  --dafina-amber-800: #8A3F05;
  --dafina-amber-900: #6F3407;
  --dafina-sand-50: #FFFCF8;
  --dafina-sand-100: #FBF7F1;
  --dafina-sand-200: #F5EFE7;
  --dafina-sand-300: #E8DDD0;
  --dafina-sand-400: #D7C6B4;
  --dafina-sand-500: #C3AB95;
  --dafina-neutral-0: #FFFFFF;
  --dafina-neutral-50: #F8FAFC;
  --dafina-neutral-100: #F1F5F9;
  --dafina-neutral-200: #E2E8F0;
  --dafina-neutral-300: #CBD5E1;
  --dafina-neutral-400: #94A3B8;
  --dafina-neutral-500: #64748B;
  --dafina-neutral-600: #475569;
  --dafina-neutral-700: #334155;
  --dafina-neutral-800: #1F2937;
  --dafina-neutral-900: #111827;
  --dafina-neutral-950: #0B1220;
  --dafina-radius-sm: 8px;
  --dafina-radius-md: 12px;
  --dafina-radius-lg: 16px;
  --dafina-radius-xl: 24px;
  --dafina-radius-pill: 999px;
  --dafina-shadow-sm: 0 1px 2px rgba(15,91,99,.06);
  --dafina-shadow-md: 0 8px 24px rgba(15,91,99,.08);
  --dafina-shadow-lg: 0 18px 50px rgba(15,91,99,.12);
  --dafina-type-xs: 12px;
  --dafina-type-sm: 14px;
  --dafina-type-base: 16px;
  --dafina-type-lg: 18px;
  --dafina-type-xl: 20px;
  --dafina-type-2xl: 24px;
  --dafina-type-3xl: 30px;
  --dafina-type-4xl: 36px;
  --dafina-type-5xl: 48px;
  --union-light-bg: #F5F8FB;
  --union-light-surface: #FFFFFF;
  --union-light-surface-elevated: #FFFFFF;
  --union-light-surface-subtle: #F0F7FB;
  --union-light-border: #D3DEE9;
  --union-light-border-subtle: #E2EAF2;
  --union-light-text: #0E2A47;
  --union-light-text-muted: #506578;
  --union-light-brand: #13467D;
  --union-light-on-brand: #FFFFFF;
  --union-light-action: #13467D;
  --union-light-action-hover: #0E3561;
  --union-light-on-action: #FFFFFF;
  --union-light-selection: #0E3561;
  --union-light-link: #13467D;
  --union-light-tint: #E6F1F9;
  --union-light-hover: #F0F7FB;
  --union-dark-bg: #0A1729;
  --union-dark-surface: #0F2138;
  --union-dark-surface-elevated: #162C48;
  --union-dark-surface-subtle: #162C48;
  --union-dark-border: #2A4462;
  --union-dark-border-subtle: #37536F;
  --union-dark-text: #EAF2FA;
  --union-dark-text-muted: #A9BCCF;
  --union-dark-brand: #7CC8EA;
  --union-dark-on-brand: #0A1729;
  --union-dark-action: #1D5C9E;
  --union-dark-action-hover: #13467D;
  --union-dark-on-action: #FFFFFF;
  --union-dark-selection: #7CC8EA;
  --union-dark-link: #7CC8EA;
  --union-dark-tint: #162C48;
  --union-dark-hover: #1B3456;
  --public-bg: var(--union-light-bg);
  --public-surface: var(--union-light-surface);
  --public-surface-elevated: var(--union-light-surface-elevated);
  --public-surface-subtle: var(--union-light-surface-subtle);
  --public-border: var(--union-light-border);
  --public-border-subtle: var(--union-light-border-subtle);
  --public-text: var(--union-light-text);
  --public-text-muted: var(--union-light-text-muted);
  --public-brand: var(--union-light-brand);
  --public-on-brand: var(--union-light-on-brand);
  --public-action: var(--union-light-action);
  --public-action-hover: var(--union-light-action-hover);
  --public-on-action: var(--union-light-on-action);
  --public-selection: var(--union-light-selection);
  --public-link: var(--union-light-link);
  --public-tint: var(--union-light-tint);
  --public-hover: var(--union-light-hover);
  --public-ink: var(--public-text);
  --public-muted: var(--public-text-muted);
  --public-action-ink: var(--public-on-action);
  --public-brand: var(--public-link);
  --public-border-strong: #cbd5e1;
  --public-field-border: #718096;
  --public-focus: #1D5C9E;
  --public-focus-ring: rgb(29 92 158 / 28%);
  --public-radius: var(--dafina-radius-lg);
  --public-radius-section: var(--dafina-radius-lg);
  --public-radius-control: var(--dafina-radius-md);
  --public-radius-field: var(--dafina-radius-md);
  --public-radius-pill: var(--dafina-radius-pill);
  --public-shadow: var(--dafina-shadow-card);
  --public-tracking: -.015em;
  --public-space-xs: .375rem;
  --public-space-sm: .75rem;
  --public-space-md: 1rem;
  --public-space-lg: 1.5rem;
  --public-space-xl: 2rem;
  --public-type-label: .8125rem;
  --public-type-body: .9375rem;
  --public-type-section: 1.0625rem;
  --public-type-total: 1.875rem;
  --public-type-page-title: clamp(1.5rem,2.3vw + .6rem,2.125rem);
  --public-status-ink: #215c9f;
  --public-status-bg: #f0f6ff;
  --public-danger-ink: #a82632;
  --public-danger-bg: #fff4f4;
  --public-danger-action: #a82632;
  --public-success-ink: #15693b;
  --public-success-bg: #eaf7ef;
  --dafina-heading: #0E2A47;
  --dafina-accent: var(--dafina-amber-700);
  --dafina-accent-tint: var(--dafina-amber-100);
  --dafina-coral: var(--dafina-coral-600);
  --dafina-coral-tint: var(--dafina-coral-50);
  --dafina-sea: #0b5c7a;
  --dafina-green: #1f8f4e;
  --dafina-night: #0d2439;
  --dafina-control-height: 2.75rem;
  --dafina-shadow-card: 0 1px 2px rgb(8 54 60 / 5%), 0 12px 32px -12px rgb(8 54 60 / 14%);
  --union-shadow-picker: 0 12px 32px -8px rgb(8 54 60 / 22%);
  --union-shadow-flag: 0 0 0 1px rgb(15 23 42 / 12%);
  --union-radius-flag: .1875rem;
  --union-danger-hover: #8c1f2a;
  /* Temporary-by-design Finpay aliases. Remove after both /portal and
     /operator briefs migrate portal.css and templates to public/dafina tokens. */
  --primary: var(--public-action);
  --primary-hover: var(--public-action);
  --primary-dark: var(--public-action-hover);
  --primary-light: #2FA9DC;
  --primary-subtle: var(--public-tint);
  --primary-border: var(--public-border-strong);
  --dark-midnight: var(--dafina-heading);
  --dark-surface: var(--union-dark-surface);
  --dark-surface-elevated: var(--union-dark-surface-elevated);
  --dark-border: var(--union-dark-border);
  --dark-border-subtle: var(--union-dark-border-subtle);
  --dark-text: var(--union-dark-text);
  --dark-text-muted: var(--union-dark-text-muted);
  --bg-page: var(--public-bg);
  --bg-surface: var(--public-surface);
  --bg-ice: var(--public-tint);
  --bg-ice-subtle: var(--public-surface-subtle);
  --bg-card-hover: var(--public-hover);
  --text-main: var(--public-ink);
  --text-muted: var(--public-muted);
  --text-dim: var(--public-muted);
  --border: var(--public-border);
  --border-subtle: var(--public-border-subtle);
  --border-input: var(--public-field-border);
  --success: var(--public-success-ink);
  --success-bg: var(--public-success-bg);
  --success-border: var(--public-success-ink);
  --info: var(--public-status-ink);
  --info-bg: var(--public-status-bg);
  --info-border: var(--public-status-ink);
  --warning: var(--dafina-accent);
  --warning-bg: var(--dafina-accent-tint);
  --warning-border: var(--dafina-accent);
  --danger: var(--public-danger-ink);
  --danger-bg: var(--public-danger-bg);
  --danger-border: var(--public-danger-ink);
  --radius-xs: var(--dafina-radius-sm);
  --radius-sm: var(--dafina-radius-sm);
  --radius-md: var(--dafina-radius-md);
  --radius-lg: var(--dafina-radius-lg);
  --radius-xl: var(--dafina-radius-xl);
  --radius-full: var(--dafina-radius-pill);
  --shadow-sm: var(--dafina-shadow-sm);
  --shadow-md: var(--dafina-shadow-md);
  --shadow-lg: var(--dafina-shadow-lg);
  --shadow-sheet: var(--dafina-shadow-lg);
  --shadow-teal-glow: var(--dafina-shadow-lg);
  --sidebar-width: 280px;
  --topbar-height: 64px;
  --focus-ring: 0 0 0 3px var(--public-focus-ring);
  --focus-outline: 2px solid var(--public-focus);
  /* Selected vs unselected: tint alone is under 3:1, so the edge ring carries
     the state; both follow the light and dark brand tokens. */
  --state-selected-bg: var(--public-tint);
  --state-selected-edge: var(--public-brand);
  --state-selected-text: var(--public-brand);
  --state-unselected-text: var(--public-muted);
  /* Unselected choice edges must reach 3:1 (WCAG 1.4.11): the field border does, the card border does not. */
  --state-unselected-edge: var(--public-field-border);
}
:root:lang(ar), .public-pages:lang(ar) { --dafina-font: "Vazirmatn", "Noto Sans", system-ui, "Segoe UI", Tahoma, sans-serif; --public-tracking: 0; }
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --public-bg: var(--union-dark-bg);
    --public-surface: var(--union-dark-surface);
    --public-surface-elevated: var(--union-dark-surface-elevated);
    --public-surface-subtle: var(--union-dark-surface-subtle);
    --public-border: var(--union-dark-border);
    --public-border-subtle: var(--union-dark-border-subtle);
    --public-text: var(--union-dark-text);
    --public-text-muted: var(--union-dark-text-muted);
    --public-brand: var(--union-dark-brand);
    --public-on-brand: var(--union-dark-on-brand);
    --public-action: var(--union-dark-action);
    --public-action-hover: var(--union-dark-action-hover);
    --public-on-action: var(--union-dark-on-action);
    --public-selection: var(--union-dark-selection);
    --public-link: var(--union-dark-link);
    --public-tint: var(--union-dark-tint);
    --public-hover: var(--union-dark-hover);
    --public-brand: var(--public-link);
    --public-border-strong: #3b4b66;
    --public-field-border: #6b7c95;
    --public-focus: #2FA9DC;
    --public-focus-ring: rgb(47 169 220 / 32%);
    --public-status-ink: #acd1ff;
    --public-status-bg: #18283b;
    --public-danger-ink: #ffadb6;
    --public-danger-bg: #351d24;
    --public-danger-action: #99313b;
    --public-success-ink: #86efac;
    --public-success-bg: #12281c;
    --dafina-heading: var(--public-text);
    --dafina-accent: var(--dafina-amber-300);
    --dafina-accent-tint: #33240f;
    --dafina-coral: var(--dafina-coral-300);
    --dafina-coral-tint: #2a1c22;
    --dafina-shadow-card: none;
    --union-shadow-picker: 0 12px 32px -8px rgb(0 0 0 / 60%);
    --union-shadow-flag: 0 0 0 1px rgb(255 255 255 / 18%);
    --union-danger-hover: #a82632;
  }
}

/* DAFINA account host semantic palette: the `semantic` block of
   communication/server/brand/dafina.tokens.json, consumed by dafina-account.css
   (checked by TestDafinaAccountTokensMirrorReference). */
:root {
  --dafina-account-light-bg: #F8FAFC;
  --dafina-account-light-surface: #FFFFFF;
  --dafina-account-light-surface-elevated: #FFFFFF;
  --dafina-account-light-surface-subtle: #F1F5F9;
  --dafina-account-light-border: #E2E8F0;
  --dafina-account-light-border-subtle: #EDF1F5;
  --dafina-account-light-text: #1F2937;
  --dafina-account-light-text-muted: #475569;
  --dafina-account-light-brand: #0F5B63;
  --dafina-account-light-on-brand: #FFFFFF;
  --dafina-account-light-action: #0F5B63;
  --dafina-account-light-action-hover: #0B464D;
  --dafina-account-light-on-action: #FFFFFF;
  --dafina-account-light-selection: #0B464D;
  --dafina-account-light-link: #0B464D;
  --dafina-account-light-tint: #E0F0F0;
  --dafina-account-light-hover: #F1F5F9;
  --dafina-account-dark-bg: #0B1220;
  --dafina-account-dark-surface: #111827;
  --dafina-account-dark-surface-elevated: #172033;
  --dafina-account-dark-surface-subtle: #172033;
  --dafina-account-dark-border: #283449;
  --dafina-account-dark-border-subtle: #34425A;
  --dafina-account-dark-text: #F8FAFC;
  --dafina-account-dark-text-muted: #94A3B8;
  --dafina-account-dark-brand: #75B2B5;
  --dafina-account-dark-on-brand: #0B1220;
  --dafina-account-dark-action: #176F73;
  --dafina-account-dark-action-hover: #0F5B63;
  --dafina-account-dark-on-action: #FFFFFF;
  --dafina-account-dark-selection: #A7D0D2;
  --dafina-account-dark-link: #75B2B5;
  --dafina-account-dark-tint: #172033;
  --dafina-account-dark-hover: #1E2A40;
}