/*
 * App design system — foundations → semantic tokens → component aliases.
 * Opt-in only: Blue Theme and Black/White retain their existing styles.
 * Theme identity/persistence lives in app-themes.js; components never branch
 * on theme IDs. A future refined theme only needs a registry entry + tokens.
 */
.phone {
  --biz-brand: #0056f5;
  --biz-brand-bright: #0e84ff;
  --biz-space-1: 4px;
  --biz-space-2: 8px;
  --biz-space-3: 12px;
  --biz-space-4: 16px;
  --biz-space-5: 20px;
  --biz-space-6: 24px;
  --biz-space-8: 32px;
  --biz-font-regular: "Vazirmatn Regular", Tahoma, sans-serif;
  --biz-font-medium: "Vazirmatn Medium", Tahoma, sans-serif;
  --biz-font-semibold: "Vazirmatn SemiBold", Tahoma, sans-serif;
  --biz-text-caption: 12px;
  --biz-text-body: 14px;
  --biz-text-section: 16px;
  --biz-text-title: 24px;
  --biz-text-display: 32px;
  --biz-document-amount-size: 20px;
  --biz-document-amount-line: 28px;
  --biz-line-caption: 20px;
  --biz-line-body: 24px;
  --biz-line-title: 32px;
  --biz-line-display: 40px;
  --biz-radius-control: 16px;
  --biz-radius-card: 24px;
  --biz-radius-sheet: 28px;
  --biz-touch: 48px;
  --biz-field-height: 56px;
  --biz-action-height: 52px;
  --biz-control-stroke: 1px;
  --biz-chip-height: 32px;
  --biz-chip-target: 44px;
  --biz-icon-glyph: 20px;
  --biz-icon-stroke: 1.75;
  --biz-icon-check-stroke: 2.15;
  --biz-icon-tile-compact: 32px;
  --biz-icon-tile-row: 40px;
  --biz-icon-tile-action: 48px;
  --biz-icon-radius-compact: 12px;
  --biz-icon-radius-row: 12px;
  --biz-icon-radius-action: 16px;
  --biz-page-gutter: var(--biz-space-5);
  --biz-card-padding: var(--biz-space-5);
  --biz-section-gap: var(--biz-space-6);
  --biz-text-input: 16px;
  --biz-radius-inset: 16px;
  --biz-step-size: 32px;
  --biz-divider-thickness: 1px;
  --biz-title-gap: 8px;
  --biz-copy-gap: 4px;
  --biz-heading-content-gap: 12px;
}

.phone.app-theme-refined {
  /* Shared neutral palette; the original logo blues remain action accents. */
  --biz-canvas: #f7f7f6;
  --biz-surface: #ffffff;
  --biz-surface-soft: #f3f5f3;
  --biz-ink: #202422;
  --biz-muted: #5d655f;
  --biz-icon: #404b44;
  --biz-line: #e1e6e2;
  --biz-control-line: #89938c;
  --biz-card-line: transparent;
  --biz-focus: #0056f5;
  --biz-selected: #edf3ff;
  --biz-success: #24714e;
  --biz-success-soft: #edf7f1;
  --biz-warning: #856028;
  --biz-warning-soft: #faf4e8;
  --biz-danger: #9b4650;
  --biz-danger-soft: #fbeff1;
  --biz-info: #3b608c;
  --biz-info-soft: #edf3fa;
  /* Direction is distinct from outcome: an outgoing payment is not an error. */
  --biz-incoming: var(--biz-success);
  --biz-incoming-soft: var(--biz-success-soft);
  --biz-outgoing: var(--biz-danger);
  --biz-outgoing-soft: var(--biz-danger-soft);
  --biz-tag-radius: 8px;
  --biz-tag-padding-block: 2px;
  --biz-tag-padding-inline: 8px;
  --biz-icon-warning: var(--biz-warning);
  --biz-icon-warning-soft: var(--biz-warning-soft);
  --biz-icon-attention: var(--biz-danger);
  --biz-icon-attention-soft: var(--biz-danger-soft);
  --biz-shadow-card: 0 1px 2px #15271c04, 0 8px 24px #15271c04;
  --biz-shadow-account: var(--biz-shadow-card);
  --biz-shadow-raised: 0 8px 32px #15271c0c, 0 2px 8px #15271c06;
  --biz-shadow-nav: 0 8px 28px #15271c14, 0 2px 6px #15271c08;

  /* Compatibility bridge for existing components, scoped to new themes. */
  --ink: var(--biz-ink);
  --muted: var(--biz-muted);
  --line: var(--biz-line);
  --soft: var(--biz-surface-soft);
  --paper: var(--biz-surface);
  --modern-primary: var(--biz-brand);
  --modern-primary-bright: var(--biz-brand-bright);
  --modern-secondary: var(--biz-icon);
  --modern-muted: var(--biz-muted);
  --modern-canvas: var(--biz-canvas);
  --modern-surface: var(--biz-surface);
  --modern-surface-soft: var(--biz-surface-soft);
  --modern-border: var(--biz-line);
  --modern-border-strong: var(--biz-control-line);
  --modern-shadow: var(--biz-shadow-card);
  --modern-shadow-raised: var(--biz-shadow-raised);
  --modern-radius-sm: 12px;
  --modern-radius-md: var(--biz-radius-control);
  --modern-radius-lg: var(--biz-radius-card);
  --modern-radius-xl: var(--biz-radius-sheet);
  --type-caption: var(--biz-text-caption);
  --type-meta: var(--biz-text-caption);
  --type-body: var(--biz-text-body);
  --type-control: var(--biz-text-body);
  --type-title: var(--biz-text-body);
  --type-section: var(--biz-text-section);
  --type-page: var(--biz-text-title);
  --type-display: var(--biz-text-display);
}

.phone.app-theme-refined[data-app-theme="subtle-depth"] {
  --biz-canvas: #f6f7f6;
  --biz-card-line: #e9ede9;
  --biz-shadow-card: 0 2px 4px #15271c04, 0 8px 20px #15271c06;
  --biz-shadow-account: 0 2px 5px #15271c06, 0 12px 28px #15271c0a;
}

/* These components declare their own variables; rebind at the same scope. */
.phone.app-theme-refined :is(.home-variant-next, .home-layout-next, .next-top-level-screen) {
  --next-app-background: var(--biz-canvas);
  --next-accent: var(--biz-icon);
  --next-brand: var(--biz-brand);
  --next-brand-bright: var(--biz-brand-bright);
  --next-accent-soft: var(--biz-surface-soft);
  --next-surface: var(--biz-surface);
  --next-line: var(--biz-line);
}

.phone.next-ui-theme.app-theme-refined .login-screen .returning-login-step {
  --login-ink: var(--biz-ink);
  --login-muted: var(--biz-muted);
  --login-primary: var(--biz-brand);
  --login-primary-strong: var(--biz-brand);
  --login-line: var(--biz-control-line);
  --login-soft: var(--biz-surface-soft);
}

@media (max-width: 390px) {
  .phone {
    --biz-page-gutter: var(--biz-space-4);
    --biz-card-padding: var(--biz-space-4);
  }
}