/* ============================================================
   Arbah v2 Design Tokens — scoped to .arbah-v2
   Source: progress/v2-source/arbah-v2/tokens.css (staged mockup).

   Tokens are namespaced --arbah-v2-* and ALL live under the .arbah-v2
   scope so legacy AND v1 paint stay byte-identical when this flag is
   off. Opt-in via ?theme=arbah-v2 or localStorage.arbah_theme === 'v2'
   — see src/design/theme-flag.js.

   v2 is its own design system, not an extension of v1: the namespace
   (--arbah-v2-*) is intentionally distinct so v1 and v2 can coexist on
   the same page without bleeding tokens.
   ============================================================ */

.arbah-v2 {
  /* ---- Navy ramp ----
     Primary brand = navy-700 (#102A43). Same ramp as v1 for visual
     continuity; the values here are duplicated under the v2 namespace
     rather than aliased so v2 stays decoupled from v1's stylesheet. */
  --arbah-v2-navy-900: #0A1B2E;
  --arbah-v2-navy-700: #102A43;  /* PRIMARY brand */
  --arbah-v2-navy-500: #2C4A6E;
  --arbah-v2-navy-100: #E3EAF3;  /* brand-soft */

  /* ---- Bronze ramp ----
     App accent = bronze-500 (#A06A2C). Print accent = bronze-600
     (#B8860B, goldenrod variant) — same convention as v1. */
  --arbah-v2-bronze-700: #7A4F1F;
  --arbah-v2-bronze-600: #B8860B;  /* print accent only */
  --arbah-v2-bronze-500: #A06A2C;  /* APP ACCENT */
  --arbah-v2-bronze-200: #D9C28A;  /* 25% stop — gradients, hover halftones */
  --arbah-v2-bronze-100: #F3E8D5;  /* mobile bottom-nav active pill bg */

  /* ---- Ink / Surfaces / Borders ---- */
  --arbah-v2-ink:            #0F172A;
  --arbah-v2-ink-muted:      #475569;
  --arbah-v2-ink-subtle:     #94A3B8;
  --arbah-v2-surface:        #FFFFFF;
  --arbah-v2-surface-sunken: #F6F8FB;
  --arbah-v2-surface-raised: #EEF2F7;
  --arbah-v2-border:         #E2E8F0;
  --arbah-v2-border-strong:  #CBD5E1;

  /* ---- Semantic aliases ---- */
  --arbah-v2-brand:  var(--arbah-v2-navy-700);
  --arbah-v2-accent: var(--arbah-v2-bronze-500);

  /* ---- Semantic colors ----
     warning is amber (D97706), distinct from bronze-500 — same rule
     as v1: never collapse warning into accent. */
  --arbah-v2-success:      #047857;
  --arbah-v2-success-soft: #D1FAE5;
  --arbah-v2-warning:      #D97706;
  --arbah-v2-warning-soft: #FEF3C7;
  --arbah-v2-danger:       #B91C1C;
  --arbah-v2-danger-soft:  #FEE2E2;
  --arbah-v2-info:         #1E40AF;
  --arbah-v2-info-soft:    #DBEAFE;

  /* ---- Type families ----
     IBM Plex Sans Arabic sits second in the sans stack so AR contexts
     pick it up; Plex Serif is the display face; Plex Mono drives
     numerics + section eyebrows. */
  --arbah-v2-font-sans:    "IBM Plex Sans", "IBM Plex Sans Arabic", -apple-system, system-ui, sans-serif;
  --arbah-v2-font-display: "IBM Plex Serif", Georgia, serif;
  --arbah-v2-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Radii ---- */
  --arbah-v2-radius-xs: 4px;
  --arbah-v2-radius-sm: 6px;
  --arbah-v2-radius-md: 8px;
  --arbah-v2-radius-lg: 12px;

  /* ---- Shadows ---- */
  --arbah-v2-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
  --arbah-v2-shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .05);
}

/* ---- Focus-visible utility ----
   :where() keeps specificity at 0 so per-component focus rules can
   override without !important. Applies inside the .arbah-v2 scope only. */
.arbah-v2 :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--arbah-v2-brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(16, 42, 67, .18);
}

/* ---- Tabular-numeric helper ----
   For currency, counts, dates, and percentages — keeps digit widths
   uniform so columns line up. Scoped to .arbah-v2 to avoid touching
   any existing .tnum usage in legacy / v1. */
.arbah-v2 .tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---- Mobile body bump ----
   .phone is the existing app-level mobile scope; bumps base text + line
   height so foremen reading on-site can see better. Same rule as v1. */
.arbah-v2 .phone {
  font-size: 15px;
  line-height: 1.5;
}