/* ============================================================ Arbah v1 Design Tokens — scoped to .arbah-v1 Source of truth: cluade/design/arbah-v1-design-system-COMPLETE-2026-05-12.md Locked 2026-05-12. Spec wins over inline goal text on any mismatch. Tokens are namespaced --arbah-* and ALL live under the .arbah-v1 scope so the legacy --brand / --accent / --ink system is untouched when the flag is off. Opt-in via ?theme=arbah-v1 or localStorage.arbah_theme === 'v1' — see src/design/theme-flag.js. Ramp policy: spec gives named stops (navy 900/700/500/100, bronze 700/600/500/200/100). The 50..900 ramp here keeps the spec's exact values for those stops and interpolates plausible shades for the others. Spec stops are flagged "(SPEC)" inline. ============================================================ */ .arbah-v1 { /* ---- Navy ramp ---- Primary = navy-700 (#102A43). The spec calls -700 the primary brand color, NOT -500. The mid ramp -500 = #2C4A6E. */ --arbah-navy-50: #F1F5FA; --arbah-navy-100: #E3EAF3; /* SPEC */ --arbah-navy-200: #C5D2E3; --arbah-navy-300: #97AAC5; --arbah-navy-400: #6481A8; --arbah-navy-500: #2C4A6E; /* SPEC (mid ramp) */ --arbah-navy-600: #1E3A5C; --arbah-navy-700: #102A43; /* SPEC — PRIMARY BRAND */ --arbah-navy-800: #0A2138; --arbah-navy-900: #0A1B2E; /* SPEC */ /* ---- Bronze ramp ---- App accent = bronze-500 (#A06A2C). Print uses -600 (#B8860B, goldenrod), which is intentionally a different hue family than the rest of the ramp — keep as-is per spec. */ --arbah-bronze-50: #FBF6EC; --arbah-bronze-100: #F3E8D5; /* SPEC (soft fill, mobile nav active pill) */ --arbah-bronze-200: #D9C28A; /* SPEC (25% stop, gradients) */ --arbah-bronze-300: #C8A66E; --arbah-bronze-400: #B0824B; --arbah-bronze-500: #A06A2C; /* SPEC — APP ACCENT */ --arbah-bronze-600: #B8860B; /* SPEC — PRINT bronze, goldenrod variant */ --arbah-bronze-700: #7A4F1F; /* SPEC */ --arbah-bronze-800: #5C3B17; --arbah-bronze-900: #3D270F; /* ---- Semantic aliases ---- */ --arbah-brand: var(--arbah-navy-700); --arbah-brand-hover: var(--arbah-navy-800); --arbah-brand-soft: var(--arbah-navy-100); --arbah-accent: var(--arbah-bronze-500); --arbah-accent-hover: var(--arbah-bronze-700); --arbah-accent-soft: var(--arbah-bronze-100); /* ---- Semantic colors ---- warning MUST stay amber (#D97706 family); accent is bronze. Per spec: "warning STAYS amber, never accent". */ --arbah-success: #047857; --arbah-success-soft: #D1FAE5; --arbah-warning: #B45309; /* amber-700 — distinct from bronze-500 */ --arbah-warning-soft: #FEF3C7; --arbah-danger: #B91C1C; --arbah-danger-soft: #FEE2E2; --arbah-info: #1E40AF; --arbah-info-soft: #DBEAFE; /* ---- Ink / Surfaces / Borders ---- */ --arbah-text: #0F172A; --arbah-text-muted: #475569; --arbah-text-subtle: #94A3B8; --arbah-bg: #F6F8FB; /* page background (surface-sunken) */ --arbah-surface: #FFFFFF; /* cards, panels */ --arbah-surface-2: #EEF2F7; /* raised / hovered surface */ --arbah-border: #E2E8F0; --arbah-border-strong: #CBD5E1; /* ---- Type families ---- IBM Plex Sans Arabic listed first in the sans stack so AR contexts pick it up; Plex Sans handles LTR. */ --arbah-font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --arbah-font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif; --arbah-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Type scale (7 named steps + 3xl per spec) ---- Mobile body bump to 15px via .phone override below. */ --arbah-text-xs: 11px; /* line 1.4 */ --arbah-text-sm: 12px; /* line 1.45 */ --arbah-text-base: 14px; /* line 1.5 */ --arbah-text-md: 16px; /* line 1.4 */ --arbah-text-lg: 20px; /* line 1.3 */ --arbah-text-xl: 26px; /* line 1.2 */ --arbah-text-2xl: 32px; /* line 1.15 */ --arbah-text-3xl: 44px; /* line 1.1 */ /* ---- Spacing scale (4px base, 7 stops; skip 28) ---- */ --arbah-space-1: 4px; --arbah-space-2: 8px; --arbah-space-3: 12px; --arbah-space-4: 16px; --arbah-space-5: 20px; --arbah-space-6: 24px; --arbah-space-8: 32px; /* ---- Radii ---- */ --arbah-radius-xs: 4px; --arbah-radius-sm: 6px; --arbah-radius-md: 8px; --arbah-radius-lg: 12px; --arbah-radius-full: 9999px; /* ---- Shadows ---- sm: dropdowns / chips. md: modals. lg: print only. */ --arbah-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06); --arbah-shadow-md: 0 4px 6px rgba(15, 23, 42, .04), 0 10px 15px rgba(15, 23, 42, .08); --arbah-shadow-lg: 0 10px 15px rgba(15, 23, 42, .10), 0 20px 25px rgba(15, 23, 42, .12); /* ---- Motion ---- */ --arbah-duration-fast: 120ms; --arbah-duration-base: 200ms; --arbah-duration-slow: 320ms; --arbah-ease-standard: cubic-bezier(.2, 0, 0, 1); --arbah-ease-emphasized: cubic-bezier(.3, 0, 0, 1); --arbah-ease-exit: cubic-bezier(.4, 0, 1, 1); /* ---- Focus ring ---- Per spec: brand color, 2px width, 2px offset, soft glow halo. */ --arbah-focus-ring-color: var(--arbah-navy-700); --arbah-focus-ring-glow: 0 0 0 3px rgba(16, 42, 67, .18); --arbah-focus-ring: 2px solid var(--arbah-navy-700); --arbah-focus-ring-offset: 2px; } /* ---- Mobile body bump (per spec) ---- .phone is the existing app-level mobile scope; bumps base text from 14 → 15 so foremen reading on-site can see better. */ .arbah-v1.phone, .arbah-v1 .phone { --arbah-text-base: 15px; } /* ---- Focus-visible utility ---- :where() keeps specificity at 0 so per-component focus rules can override without !important. Applies inside the .arbah-v1 scope only. */ .arbah-v1 :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: var(--arbah-focus-ring); outline-offset: var(--arbah-focus-ring-offset); box-shadow: var(--arbah-focus-ring-glow); }