/* ══════════════════════════════════════════════════════════ Azamind Design Tokens Luxury DeFi Design System — Black & Gold ══════════════════════════════════════════════════════════ */ /* ── Safe-area insets (cross-platform) ─────────────────── iOS WKWebView populates env(safe-area-inset-*); Android Chromium WebView does NOT, so MainPage.xaml.cs pushes --safe-top/--safe-bottom/--safe-left/ --safe-right via JS on each page load. `max()` wins the larger of the two, so one token works on both platforms (and resolves to 0 on desktop / web where neither populates anything). */ :root { --az-safe-top: max(env(safe-area-inset-top, 0px), var(--safe-top, 0px)); --az-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-bottom, 0px)); --az-safe-left: max(env(safe-area-inset-left, 0px), var(--safe-left, 0px)); --az-safe-right: max(env(safe-area-inset-right, 0px), var(--safe-right, 0px)); /* ── Liquid Glass — theme-agnostic Apple iOS 26 material ─────────────── One material that adapts to whatever content sits behind it, not to the system theme. Heavy backdrop-filter does the actual work (blur 22px + saturate 180% + brightness 1.05) — matches the blur radius Apple uses on the iOS 26 BottomBar + Mail title bar. `bg` adds a diagonal specular gradient on top so the material catches light like real glass. Used by the floating BottomNav capsule, sticky Wallets tabs, SignInPrompt card. */ --az-liquid-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.12) 100%); --az-liquid-glass-filter: blur(22px) saturate(180%) brightness(1.05); --az-liquid-glass-border: 1px solid rgba(255, 255, 255, 0.28); --az-liquid-glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.08); } /* ── Dark Theme (default) ────────────────────────────────── */ :root { /* Dark-tinted liquid glass — overrides the theme-agnostic white-tinted gradient above for the BottomNav + DeFi/More popovers, which read as a washed-out grey pill against the black surface. Light theme restores the white-tinted gradient inside the light `:root` block below. */ --az-liquid-glass-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.40) 60%, rgba(0, 0, 0, 0.50) 100%); /* Dimmed specular edge — 0.28 alpha rims too bright against the dark pill above; 0.12 keeps the iOS glass highlight without the neon outline. */ --az-liquid-glass-border: 1px solid rgba(255, 255, 255, 0.12); /* Drop the outer shadow on dark — invisible against a black surface anyway, and the soft halo made the pill feel hazier than the spec. Inset highlights are kept (they shape the glass material). Light theme keeps the original shadow stack. */ --az-liquid-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(0, 0, 0, 0.08); /* Gold Scale — CSS `gold` (#FFD700) as the single source of truth across themes. */ --az-gold: #FFD700; --az-gold-light: #FFE14D; --az-gold-lighter: rgba(255, 215, 0, 0.12); --az-gold-dark: #D4AF00; --az-gold-darker: #A68B00; --az-gold-rgb: 255, 215, 0; /* Luxury 24k — 5-stop metallic shimmer. Works on both dark and light surfaces. Cross-platform safe: sRGB, renders identically on WebView2 / WKWebView / Chromium. */ --az-gold-gradient: linear-gradient(135deg, #BF953F 0%, #FCF6BA 25%, #B38728 50%, #FBF5B7 75%, #AA771C 100%); --az-gold-gradient-subtle: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(252, 246, 186, 0.05) 100%); /* Surface Scale — Deep Black */ --az-surface-900: #000000; --az-surface-850: #0F0F0F; --az-surface-800: #141414; --az-surface-700: #1A1A1A; --az-surface-600: #222222; --az-surface-500: #2A2A2A; --az-surface-400: #333333; --az-surface-300: #444444; --az-surface-200: #666666; --az-surface-100: #999999; --az-surface-50: #E0E0E0; /* Semantic — jewel-tone palette tuned to sit alongside #FFD700 gold + black. Emerald success + bordeaux danger keep the luxury feel; warning is gold itself (no separate yellow that would fight the brand accent). */ --az-success: #10B981; /* emerald — Tailwind emerald-500 */ --az-success-rgb: 16, 185, 129; --az-success-lighter: rgba(16, 185, 129, 0.12); --az-warning: var(--az-gold); --az-warning-rgb: var(--az-gold-rgb); --az-warning-lighter: var(--az-gold-lighter); --az-danger: #9F1239; /* bordeaux — Tailwind rose-800, wine red */ --az-danger-rgb: 159, 18, 57; --az-danger-lighter: rgba(159, 18, 57, 0.12); --az-info: #5AC8FA; --az-info-lighter: rgba(90, 200, 250, 0.12); /* Health-factor aliases reuse the semantic tokens so there's a single source of truth for green/yellow/red across the app. */ --az-health-safe: var(--az-success); --az-health-safe-rgb: var(--az-success-rgb); --az-health-warning: var(--az-warning); --az-health-warning-rgb: var(--az-warning-rgb); --az-health-danger: var(--az-danger); --az-health-danger-rgb: var(--az-danger-rgb); /* Glass Effects */ --az-glass-bg: rgba(20, 20, 20, 0.65); --az-glass-bg-elevated: rgba(26, 26, 26, 0.75); --az-glass-blur: 20px; --az-glass-blur-heavy: 40px; --az-glass-border: 1px solid rgba(255, 215, 0, 0.08); --az-glass-border-hover: 1px solid rgba(255, 215, 0, 0.20); --az-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); /* On-surface text — for dark theme, light text */ --az-on-primary: #000000; --az-on-surface: var(--az-surface-50); --az-on-surface-secondary: var(--az-surface-200); } /* ── Light Theme ─────────────────────────────────────────── */ @media (prefers-color-scheme: light) { :root { /* Restore the original white-tinted liquid glass — the dark `:root` above overrides the theme-agnostic default to a black-tinted gradient, which reads as a dim grey pill on white. */ --az-liquid-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.12) 100%); /* Restore original specular edge — dark theme softens it to 0.12. */ --az-liquid-glass-border: 1px solid rgba(255, 255, 255, 0.28); /* Restore original liquid-glass shadow stack — dark theme drops the outer halo above. */ --az-liquid-glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.08); /* Gold Scale — same amber family as dark theme but darker luminance for readability on white. Physics: #FFD700 on white = 1.4:1 contrast (WCAG fail); #D4AF00 = 3.5:1 (passes large-text). Apple does the same dance with system blue (#007AFF light / #0A84FF dark). */ --az-gold: #D4AF00; --az-gold-light: #FFD700; --az-gold-lighter: rgba(212, 175, 0, 0.12); --az-gold-dark: #A68B00; --az-gold-darker: #7A6700; --az-gold-rgb: 212, 175, 0; /* Darker gradient stops — pastel #FCF6BA / #FBF5B7 disappear on white backgrounds, so replace with visible amber tones. Keeps metallic feel. */ --az-gold-gradient: linear-gradient(135deg, #BF953F 0%, #D4AF00 25%, #B38728 50%, #D4AF00 75%, #AA771C 100%); --az-gold-gradient-subtle: linear-gradient(135deg, rgba(212, 175, 0, 0.15) 0%, rgba(191, 149, 63, 0.05) 100%); /* Surface Scale — Warm Off-White */ --az-surface-900: #FFFFFF; --az-surface-850: #FFFEF9; --az-surface-800: #FFFFFF; --az-surface-700: #FFFFFF; --az-surface-600: #F0EDE5; --az-surface-500: #E5E0D5; --az-surface-400: #B0A890; --az-surface-300: #998F78; --az-surface-200: #6B6455; --az-surface-100: #4A4538; --az-surface-50: #1A1714; /* Semantic — same emerald/gold/bordeaux family, deeper variants for white bg contrast (WCAG AA against #FFFFFF for body text). */ --az-success: #047857; /* emerald-700 */ --az-success-rgb: 4, 120, 87; --az-success-lighter: rgba(4, 120, 87, 0.10); --az-warning: var(--az-gold); --az-warning-rgb: var(--az-gold-rgb); --az-warning-lighter: var(--az-gold-lighter); --az-danger: #7F1D1D; /* red-900 — deep bordeaux */ --az-danger-rgb: 127, 29, 29; --az-danger-lighter: rgba(127, 29, 29, 0.10); --az-info: #0099CC; --az-info-lighter: rgba(0, 153, 204, 0.10); --az-health-safe: var(--az-success); --az-health-safe-rgb: var(--az-success-rgb); --az-health-warning: var(--az-warning); --az-health-warning-rgb: var(--az-warning-rgb); --az-health-danger: var(--az-danger); --az-health-danger-rgb: var(--az-danger-rgb); /* Glass Effects — lighter for white backgrounds */ --az-glass-bg: rgba(255, 255, 255, 0.70); --az-glass-bg-elevated: rgba(255, 255, 255, 0.85); --az-glass-blur: 20px; --az-glass-blur-heavy: 40px; --az-glass-border: 1px solid rgba(212, 175, 0, 0.12); --az-glass-border-hover: 1px solid rgba(212, 175, 0, 0.30); --az-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); /* Shadows — softened alpha for light backgrounds; dark-theme alphas blow out cards/tables on white. shadow-2 is the default panel/card/table elevation across the project; two-layer drop (tight + spread) gives a more visible "lifted" look than a single-layer soft blur. */ --az-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --az-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08); --az-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.08); --az-shadow-4: 0 16px 48px rgba(0, 0, 0, 0.10); --az-shadow-gold: 0 4px 20px rgba(212, 175, 0, 0.15); /* On-surface text — for light theme, dark text. --az-on-primary stays #000 in both themes because --az-gold is yellow-orange in both (#FFD700 dark, #D4AF00 light) and white-on-gold fails WCAG contrast. Used by .btn-primary (Auth), .rz-button.rz-primary (Radzen), and .login-btn. */ --az-on-primary: #000000; --az-on-surface: var(--az-surface-50); --az-on-surface-secondary: var(--az-surface-200); } } /* ── Typography ──────────────────────────────────────────── */ :root { --az-font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Responsive Type Scale */ --az-text-display: clamp(32px, 3.5vw, 56px); --az-text-h1: clamp(28px, 3vw, 48px); --az-text-h2: clamp(24px, 2.5vw, 40px); --az-text-h3: clamp(20px, 2vw, 32px); --az-text-h4: clamp(18px, 1.5vw, 24px); --az-text-body: clamp(14px, 1vw, 16px); --az-text-body-sm: clamp(12px, 0.85vw, 14px); --az-text-overline: clamp(10px, 0.7vw, 12px); --az-text-mono: clamp(13px, 0.9vw, 15px); } /* ── Spacing (4px grid, M3) ──────────────────────────────── */ :root { --az-space-1: 4px; --az-space-2: 8px; --az-space-3: 12px; --az-space-4: 16px; --az-space-5: 20px; --az-space-6: 24px; --az-space-8: 32px; --az-space-10: 40px; --az-space-12: 48px; --az-space-16: 64px; } /* ── Dialog padding ────────────────────────────────────────── Single source of truth for Radzen dialog body inset. Applied globally to .rz-dialog-content in components-shared.css so every modal in the app (Edit, Create, Link, NetworkEdit, BlockUser, LogDetails, NetworkLogoUpload, ManualWallet, …) inherits this without each dialog re-declaring its own padding. - Desktop: roomy (20px) — matches the rest of the dialog rhythm. - Mobile (≤640px): tight (8px) — the dialog already uses 95vw, so extra padding wastes scarce screen real estate. */ :root { --az-dialog-padding: var(--az-space-5); } @media (max-width: 640px) { :root { --az-dialog-padding: var(--az-space-2); } } /* ── Border Radius ───────────────────────────────────────── */ :root { --az-radius-sm: 8px; --az-radius-md: 12px; --az-radius-lg: 16px; --az-radius-xl: 24px; --az-radius-full: 9999px; } /* ── Shadows ─────────────────────────────────────────────── */ :root { --az-shadow-0: none; --az-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --az-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.40); --az-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.4); --az-shadow-4: 0 16px 48px rgba(0, 0, 0, 0.5); --az-shadow-gold: 0 4px 20px rgba(255, 215, 0, 0.15); } /* ── Transitions ─────────────────────────────────────────── */ :root { --az-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --az-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --az-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); } /* ── Responsive breakpoints ────────────────────────────────── * CSS custom properties (--var) cannot be used inside @media * query parentheses, so the values below are documentation * only — the actual numbers live inline in @media rules. * * Single source of truth — keep all responsive CSS aligned to * these tiers. When adding a new media query, copy a value from * this table verbatim (do NOT introduce 770px / 1023px / etc). * * Tier | Range | Use case * ------------|----------------|-------------------------------- * Tiny phone | ≤ 480px | Single-column dashboard cards, * | | hide tx amount in recent list * Mobile | 481-768px | Bottom nav, sidebar hidden, * | | DataGrid hide-on-mobile + frozen * | | column + edge shadow * Tablet | 769-1024px | Sidebar collapses to icon rail, * | | brand block hidden * Desktop | ≥ 1025px | Full sidebar, multi-column grids * * Pair conventions used in @media: * max-width: 480px ↔ min-width: 481px * max-width: 768px ↔ min-width: 769px * max-width: 1024px ↔ min-width: 1025px * * Reference values (unused at runtime — for grep / IDE hint): * --az-bp-tiny: 480px; * --az-bp-mobile: 768px; * --az-bp-tablet: 1024px; * ──────────────────────────────────────────────────────────── */