/* ========================================================================= AG design tokens — the Cortex token system, no build step. Lifted from Cortex's tokens.css so the two apps look like siblings, with the Tailwind @theme bridge removed (AG is plain CSS, nothing to bridge). Light — pure white, near-black text, hairline borders, soft shadows. Dark — near-black surfaces, warm gold accent, deeper shadows. A theme swap is a variable swap. Driven by prefers-color-scheme AND an explicit data-theme attribute on ; the manual choice wins both ways. ========================================================================= */ :root { --bg: #ffffff; --surface: #f5f5f7; --elevated: #ffffff; --text: #1d1d1f; --muted: #6e6e73; /* --hairline is too light to carry a form border legibly (fails 3:1), so inputs use --control and decorative dividers use --hairline. */ --hairline: #d2d2d7; --control: #86868b; --accent: #4338ca; --accent-soft: #eef2ff; --on-accent: #ffffff; --danger: #b3261e; --warn: #8a6100; --ok: #146c43; --info: #1d4ed8; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --r-sm: 8px; --r-input: 11px; --r: 14px; --r-lg: 22px; --r-pill: 980px; --elev: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06); --elev-lift: 0 2px 6px rgb(0 0 0 / 0.06), 0 24px 56px rgb(0 0 0 / 0.12); --elev-glow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); --ff: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif; --ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --ease: cubic-bezier(0.32, 0.72, 0, 1); --t-fast: 150ms; --t: 240ms; --tabbar-h: 56px; --container: 720px; color-scheme: light; } :root[data-theme="dark"] { --bg: #0a0a0b; --surface: #141416; --elevated: #1c1c1f; --text: #f5f5f7; --muted: #a1a1a6; --hairline: #2c2c2e; --control: #7a7a80; --accent: #d4af37; --accent-soft: #211c0e; --on-accent: #0a0a0b; --danger: #ff6961; --warn: #e8b931; --ok: #4ade80; --info: #7aa2ff; /* A soft shadow is invisible on near-black, so both tiers go heavier. */ --elev: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 24px rgb(0 0 0 / 0.45); --elev-lift: 0 2px 8px rgb(0 0 0 / 0.55), 0 24px 64px rgb(0 0 0 / 0.6); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a0a0b; --surface: #141416; --elevated: #1c1c1f; --text: #f5f5f7; --muted: #a1a1a6; --hairline: #2c2c2e; --control: #7a7a80; --accent: #d4af37; --accent-soft: #211c0e; --on-accent: #0a0a0b; --danger: #ff6961; --warn: #e8b931; --ok: #4ade80; --info: #7aa2ff; --elev: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 24px rgb(0 0 0 / 0.45); --elev-lift: 0 2px 8px rgb(0 0 0 / 0.55), 0 24px 64px rgb(0 0 0 / 0.6); color-scheme: dark; } } /* ===================== Base ===================== */ * { box-sizing: border-box; } /* Any class that sets `display` outranks the user-agent's [hidden] rule, so `hidden` silently stops working on .field, .btn and friends — the 2FA field and the install button both leaked onto the login screen this way. One global rule is the reliable fix. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; /* Lock the document; panes scroll internally so the tab bar never moves. */ height: 100%; overflow: hidden; } body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--ff); font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Stops the iOS rubber-band bounce revealing white behind a dark app. */ overscroll-behavior: none; transition: background-color var(--t) var(--ease), color var(--t) var(--ease); } h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; } h1 { font-size: 24px; line-height: 1.15; letter-spacing: -0.022em; } h2 { font-size: 19px; line-height: 1.25; letter-spacing: -0.018em; } h3 { font-size: 16px; } p { margin: 0; } a { color: inherit; text-decoration: none; } :focus-visible { outline: none; box-shadow: var(--elev-glow); border-radius: var(--r-sm); } .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }