/* Copied verbatim from aisofts-superapp packages/theme/src/tokens.css (branch p0/aws-2gb @ 5bfc8fa, 2026-11-12) - the aiSofts design system. Our own code; re-copy, do not edit here. */ /* * GENERATED from src/tokens.ts by src/render.ts - do not edit by hand (test/tokens.test.ts fails on drift). * Base token layer (design-system.md 6, RATIFIED 2026-11-06). Precedence by cascade layer, not specificity: * base tokens in as-base, the tenant's generated brand CSS (/_brand/...) in as-brand, the tenant's custom * CSS (--as-brand-* only, design-system 7.5) in as-tenant. */ @layer as-reset, as-base, as-components, as-brand, as-tenant; @layer as-base { :root { --as-font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", sans-serif; --as-font-display: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", sans-serif; --as-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Roboto Mono", "Liberation Mono", monospace; --as-fs-xs: 0.75rem; --as-fs-sm: 0.875rem; --as-fs-base: 1rem; --as-fs-lg: 1.125rem; --as-fs-xl: 1.25rem; --as-fs-2xl: 1.5rem; --as-fs-3xl: 1.875rem; --as-fs-metric: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); --as-fs-display: clamp(1.875rem, 1.25rem + 2.5vw, 3rem); --as-fw-regular: 400; --as-fw-medium: 500; --as-fw-semibold: 600; --as-fw-bold: 700; --as-lh-tight: 1.15; --as-lh-snug: 1.3; --as-lh-normal: 1.5; --as-lh-relaxed: 1.6; --as-lh-tight-deva: 1.4; --as-ls-display: -0.015em; --as-ls-eyebrow: 0.06em; --as-measure: 68ch; --as-sp-1: 0.25rem; --as-sp-2: 0.5rem; --as-sp-3: 0.75rem; --as-sp-4: 1rem; --as-sp-5: 1.25rem; --as-sp-6: 1.5rem; --as-sp-8: 2rem; --as-sp-10: 2.5rem; --as-sp-12: 3rem; --as-sp-16: 4rem; --as-sp-20: 5rem; --as-sp-24: 6rem; --as-pad-card: 1.25rem; --as-gap-card: 1rem; --as-gap-section: 2rem; --as-gutter-page: clamp(1rem, 4vw, 2.5rem); --as-content-max: 75rem; --as-content-max-wide: 90rem; --as-form-w-narrow: 27.5rem; --as-form-w: 35rem; --as-tile-min: 17.5rem; --as-tile-min-market: 20rem; --as-kpi-min: 10rem; --as-field-w-xs: 8ch; --as-field-w-sm: 20ch; --as-field-w-md: 32ch; --as-rail-w: 15.5rem; --as-rail-w-collapsed: 4.5rem; --as-topbar-h: 4rem; --as-action-bar-h: 4.5rem; --as-tabbar-h: 4rem; --as-banner-stack-h: 0px; --as-row-min-h: 3.5rem; --as-target-min: 2.75rem; --as-target-touch: 3rem; --as-otp-gap: 0.5rem; --as-otp-cell: min(3rem, calc((100% - 5 * var(--as-otp-gap)) / 6)); --as-r-xs: 6px; --as-r-sm: 8px; --as-r-md: 12px; --as-r-lg: 16px; --as-r-xl: 20px; --as-r-pill: 999px; --as-border-w: 1px; --as-focus-ring: 0 0 0 2px var(--as-surface-raised), 0 0 0 4px var(--as-accent); --as-focus-ring-inset: inset 0 0 0 2px var(--as-accent); --as-glass-blur: blur(16px) saturate(1.2); --as-z-sticky: 10; --as-z-rail: 20; --as-z-topbar: 30; --as-z-banner: 40; --as-z-dropdown: 50; --as-z-sheet: 60; --as-z-dialog: 70; --as-z-toast: 80; --as-z-skiplink: 90; --as-glass-blur-lg: blur(20px) saturate(1.6); --as-glass-blur-md: blur(14px) saturate(1.4); --as-fs-hero: clamp(2.25rem, 1.35rem + 3.8vw, 4.25rem); --as-lh-hero: 1.06; --as-ls-hero: -0.028em; --as-orbit-size: clamp(16rem, 12rem + 16vw, 26rem); --as-orb-size: clamp(3rem, 2.4rem + 1.6vw, 4rem); --as-aurora-drift: 3%; --as-hub-reading-max: min(100%, 52rem); --as-hub-aside-w: 20rem; --as-hub-money-col-min: 14ch; --as-hub-board-col-min: 17.5rem; --as-hub-preview-min: 22.5rem; --as-hub-split: 6fr 6fr; --as-hub-stage-dot: 0.75rem; --as-hub-stage-dot-current: 1rem; --as-hub-stage-line: 2px; --as-hub-stage-done: var(--as-text-primary); --as-hub-stage-current: var(--as-accent); --as-hub-stage-upcoming: var(--as-border-control); --as-hub-stage-line-done: var(--as-text-primary); --as-hub-stage-line-upcoming: var(--as-border-hairline); --as-hub-progress-h: 0.5rem; --as-hub-progress-track: var(--as-surface-sunk); --as-hub-progress-fill: var(--as-accent-fill); --as-hub-hash-bg: var(--as-surface-sunk); --as-hub-hash-group-gap: 0.35em; --as-hub-sig-rule: 1px solid var(--as-border-control); --as-hub-preview-frame: 1px dashed var(--as-border-control); --as-hub-filter-hard: var(--as-danger); --as-hub-filter-hard-soft: var(--as-danger-soft); --as-hub-filter-soft: var(--as-warning); --as-hub-filter-soft-soft: var(--as-warning-soft); --as-hub-filter-clean: var(--as-success); --as-hub-filter-clean-soft: var(--as-success-soft); } @media (min-width: 40em) { :root { --as-pad-card: 1.5rem; --as-gap-card: 1.5rem; --as-gap-section: 2.5rem; } } :root, [data-theme="light"] { color-scheme: light; --as-surface-canvas: #F8F6F4; --as-surface-raised: #FEFDFC; --as-surface-sunk: #F2F0EC; --as-surface-overlay: #FEFDFC; --as-text-primary: #171B21; --as-text-muted: #54585F; --as-text-subtle: #66696F; --as-text-disabled: #83868B; --as-border-hairline: color-mix(in oklch, #171B21 10%, transparent); --as-border-control: #83868C; --as-accent: #4759B7; --as-accent-fill: #4759B7; --as-accent-edge: transparent; --as-accent-hover: #3A4AA7; --as-accent-active: #2F3B97; --as-on-accent: #FDFBFA; --as-accent-soft: #ECF0FD; --as-brand-mark: #4759B7; --as-on-brand-mark: #FDFBFA; --as-success: #0B7643; --as-success-soft: #E1F7E7; --as-warning: #955905; --as-warning-soft: #FEF0D8; --as-danger: #BE2323; --as-danger-soft: #FFEBE8; --as-on-danger: #FDFBFA; --as-info: #136B94; --as-info-soft: #E1F3FF; --as-sheen: inset 0 1px 0 oklch(1 0 0 / 0.65); --as-sheen-fill: inset 0 1px 0 oklch(1 0 0 / 0.22); --as-shadow-1: 0 1px 1px oklch(0.25 0.02 60 / 0.04), 0 1px 3px oklch(0.25 0.02 60 / 0.06); --as-shadow-2: 0 2px 4px oklch(0.25 0.02 60 / 0.05), 0 10px 24px -6px oklch(0.25 0.02 60 / 0.12); --as-shadow-3: 0 4px 8px oklch(0.25 0.02 60 / 0.06), 0 24px 48px -12px oklch(0.25 0.02 60 / 0.2); --as-glass-bg: color-mix(in oklch, var(--as-surface-raised) 78%, transparent); --as-row-hover: color-mix(in oklch, var(--as-text-primary) 4%, transparent); --as-tap-highlight: color-mix(in oklch, var(--as-accent) 14%, transparent); --as-scrim: oklch(0.2 0.01 60 / 0.4); --as-aurora: radial-gradient(42rem 30rem at 8% 0%, color-mix(in oklch, #8B5CF6 22%, transparent), transparent 70%), radial-gradient(38rem 28rem at 92% 6%, color-mix(in oklch, #0EA5E9 20%, transparent), transparent 70%), radial-gradient(46rem 32rem at 72% 58%, color-mix(in oklch, #10B981 18%, transparent), transparent 72%), radial-gradient(36rem 26rem at 14% 82%, color-mix(in oklch, #F59E0B 16%, transparent), transparent 72%), radial-gradient(40rem 30rem at 46% 34%, color-mix(in oklch, #4759B7 16%, transparent), transparent 72%); --as-aurora-scrim: color-mix(in oklch, var(--as-surface-canvas) 50%, transparent); --as-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --as-grain-opacity: 0.05; --as-glass-fill: color-mix(in oklch, var(--as-surface-raised) 72%, transparent); --as-glass-fill-strong: color-mix(in oklch, var(--as-surface-raised) 86%, transparent); --as-glass-fill-subtle: color-mix(in oklch, var(--as-surface-raised) 52%, transparent); --as-glass-edge: color-mix(in oklch, #FFFFFF 75%, transparent); --as-glass-stroke: color-mix(in oklch, #171B21 8%, transparent); --as-glass-shadow: inset 0 1px 0 color-mix(in oklch, #FFFFFF 80%, transparent), 0 1px 2px oklch(0.25 0.03 270 / 0.05), 0 8px 24px -8px oklch(0.25 0.03 270 / 0.12), 0 24px 48px -24px oklch(0.25 0.03 270 / 0.16); --as-glass-shadow-hover: inset 0 1px 0 color-mix(in oklch, #FFFFFF 85%, transparent), 0 2px 4px oklch(0.25 0.03 270 / 0.06), 0 16px 36px -10px oklch(0.25 0.03 270 / 0.18), 0 36px 64px -28px oklch(0.25 0.03 270 / 0.22); --as-glass-sheen: linear-gradient(115deg, transparent 30%, color-mix(in oklch, #FFFFFF 55%, transparent) 50%, transparent 70%); --as-hero-ink: linear-gradient(120deg, #171B21 0%, #2F3B97 55%, #5B2BB0 100%); --as-p-charge: #006C49; --as-p-swap: #9A5800; --as-p-air: #0369A1; --as-p-agri: #3F6212; --as-p-kyc: #6D28D9; --as-glow-charge: #10B981; --as-glow-swap: #F59E0B; --as-glow-air: #0EA5E9; --as-glow-agri: #84CC16; --as-glow-kyc: #8B5CF6; --as-hub-aurora-opacity: 0.55; } [data-theme="dark"] { color-scheme: dark; --as-surface-canvas: #120F0C; --as-surface-raised: #1B1814; --as-surface-sunk: #0C0A07; --as-surface-overlay: #25211D; --as-text-primary: #EFECE8; --as-text-muted: #C1BDB8; --as-text-subtle: #A19E99; --as-text-disabled: #74716C; --as-border-hairline: color-mix(in oklch, #FFFFFF 8%, transparent); --as-border-control: #78746E; --as-accent: #8A9FF0; --as-accent-fill: #8A9FF0; --as-accent-edge: transparent; --as-accent-hover: #A1B4F8; --as-accent-active: #AFC1FF; --as-on-accent: #0D111F; --as-accent-soft: #202742; --as-brand-mark: #8A9FF0; --as-on-brand-mark: #0D111F; --as-success: #6AC48C; --as-success-soft: #152C1E; --as-warning: #EBB25F; --as-warning-soft: #342611; --as-danger: #F17871; --as-danger-soft: #3B1C1A; --as-on-danger: #1A0E0D; --as-info: #73B7DF; --as-info-soft: #112937; --as-sheen: inset 0 1px 0 oklch(1 0 0 / 0.05); --as-sheen-fill: inset 0 1px 0 oklch(1 0 0 / 0.1); --as-shadow-1: 0 1px 2px oklch(0.05 0.01 60 / 0.4); --as-shadow-2: 0 2px 6px oklch(0.05 0.01 60 / 0.45), 0 12px 28px -8px oklch(0.05 0.01 60 / 0.55); --as-shadow-3: 0 6px 12px oklch(0.05 0.01 60 / 0.5), 0 28px 56px -12px oklch(0.05 0.01 60 / 0.65); --as-glass-bg: color-mix(in oklch, var(--as-surface-raised) 80%, transparent); --as-row-hover: color-mix(in oklch, var(--as-text-primary) 4%, transparent); --as-tap-highlight: color-mix(in oklch, var(--as-accent) 18%, transparent); --as-scrim: oklch(0.05 0.01 60 / 0.6); --as-aurora: radial-gradient(42rem 30rem at 8% 0%, color-mix(in oklch, #8B5CF6 26%, transparent), transparent 70%), radial-gradient(38rem 28rem at 92% 6%, color-mix(in oklch, #0EA5E9 22%, transparent), transparent 70%), radial-gradient(46rem 32rem at 72% 58%, color-mix(in oklch, #10B981 20%, transparent), transparent 72%), radial-gradient(36rem 26rem at 14% 82%, color-mix(in oklch, #F59E0B 14%, transparent), transparent 72%), radial-gradient(40rem 30rem at 46% 34%, color-mix(in oklch, #4759B7 24%, transparent), transparent 72%); --as-aurora-scrim: color-mix(in oklch, var(--as-surface-canvas) 50%, transparent); --as-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --as-grain-opacity: 0.07; --as-glass-fill: color-mix(in oklch, var(--as-surface-raised) 72%, transparent); --as-glass-fill-strong: color-mix(in oklch, var(--as-surface-raised) 86%, transparent); --as-glass-fill-subtle: color-mix(in oklch, var(--as-surface-raised) 52%, transparent); --as-glass-edge: color-mix(in oklch, #FFFFFF 12%, transparent); --as-glass-stroke: color-mix(in oklch, #FFFFFF 9%, transparent); --as-glass-shadow: inset 0 1px 0 color-mix(in oklch, #FFFFFF 8%, transparent), 0 1px 2px oklch(0.05 0.02 270 / 0.4), 0 10px 28px -8px oklch(0.05 0.02 270 / 0.55), 0 28px 56px -24px oklch(0.05 0.02 270 / 0.6); --as-glass-shadow-hover: inset 0 1px 0 color-mix(in oklch, #FFFFFF 12%, transparent), 0 2px 6px oklch(0.05 0.02 270 / 0.45), 0 18px 40px -10px oklch(0.05 0.02 270 / 0.6), 0 40px 72px -28px oklch(0.05 0.02 270 / 0.65); --as-glass-sheen: linear-gradient(115deg, transparent 30%, color-mix(in oklch, #FFFFFF 10%, transparent) 50%, transparent 70%); --as-hero-ink: linear-gradient(120deg, #EFECE8 0%, #C9D3FF 55%, #D9C7FF 100%); --as-p-charge: #34D399; --as-p-swap: #FBBF24; --as-p-air: #38BDF8; --as-p-agri: #A3E635; --as-p-kyc: #A78BFA; --as-glow-charge: #10B981; --as-glow-swap: #F59E0B; --as-glow-air: #0EA5E9; --as-glow-agri: #84CC16; --as-glow-kyc: #8B5CF6; --as-hub-aurora-opacity: 0.45; } @media (prefers-color-scheme: dark) { [data-theme="system"] { color-scheme: dark; --as-surface-canvas: #120F0C; --as-surface-raised: #1B1814; --as-surface-sunk: #0C0A07; --as-surface-overlay: #25211D; --as-text-primary: #EFECE8; --as-text-muted: #C1BDB8; --as-text-subtle: #A19E99; --as-text-disabled: #74716C; --as-border-hairline: color-mix(in oklch, #FFFFFF 8%, transparent); --as-border-control: #78746E; --as-accent: #8A9FF0; --as-accent-fill: #8A9FF0; --as-accent-edge: transparent; --as-accent-hover: #A1B4F8; --as-accent-active: #AFC1FF; --as-on-accent: #0D111F; --as-accent-soft: #202742; --as-brand-mark: #8A9FF0; --as-on-brand-mark: #0D111F; --as-success: #6AC48C; --as-success-soft: #152C1E; --as-warning: #EBB25F; --as-warning-soft: #342611; --as-danger: #F17871; --as-danger-soft: #3B1C1A; --as-on-danger: #1A0E0D; --as-info: #73B7DF; --as-info-soft: #112937; --as-sheen: inset 0 1px 0 oklch(1 0 0 / 0.05); --as-sheen-fill: inset 0 1px 0 oklch(1 0 0 / 0.1); --as-shadow-1: 0 1px 2px oklch(0.05 0.01 60 / 0.4); --as-shadow-2: 0 2px 6px oklch(0.05 0.01 60 / 0.45), 0 12px 28px -8px oklch(0.05 0.01 60 / 0.55); --as-shadow-3: 0 6px 12px oklch(0.05 0.01 60 / 0.5), 0 28px 56px -12px oklch(0.05 0.01 60 / 0.65); --as-glass-bg: color-mix(in oklch, var(--as-surface-raised) 80%, transparent); --as-row-hover: color-mix(in oklch, var(--as-text-primary) 4%, transparent); --as-tap-highlight: color-mix(in oklch, var(--as-accent) 18%, transparent); --as-scrim: oklch(0.05 0.01 60 / 0.6); --as-aurora: radial-gradient(42rem 30rem at 8% 0%, color-mix(in oklch, #8B5CF6 26%, transparent), transparent 70%), radial-gradient(38rem 28rem at 92% 6%, color-mix(in oklch, #0EA5E9 22%, transparent), transparent 70%), radial-gradient(46rem 32rem at 72% 58%, color-mix(in oklch, #10B981 20%, transparent), transparent 72%), radial-gradient(36rem 26rem at 14% 82%, color-mix(in oklch, #F59E0B 14%, transparent), transparent 72%), radial-gradient(40rem 30rem at 46% 34%, color-mix(in oklch, #4759B7 24%, transparent), transparent 72%); --as-aurora-scrim: color-mix(in oklch, var(--as-surface-canvas) 50%, transparent); --as-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --as-grain-opacity: 0.07; --as-glass-fill: color-mix(in oklch, var(--as-surface-raised) 72%, transparent); --as-glass-fill-strong: color-mix(in oklch, var(--as-surface-raised) 86%, transparent); --as-glass-fill-subtle: color-mix(in oklch, var(--as-surface-raised) 52%, transparent); --as-glass-edge: color-mix(in oklch, #FFFFFF 12%, transparent); --as-glass-stroke: color-mix(in oklch, #FFFFFF 9%, transparent); --as-glass-shadow: inset 0 1px 0 color-mix(in oklch, #FFFFFF 8%, transparent), 0 1px 2px oklch(0.05 0.02 270 / 0.4), 0 10px 28px -8px oklch(0.05 0.02 270 / 0.55), 0 28px 56px -24px oklch(0.05 0.02 270 / 0.6); --as-glass-shadow-hover: inset 0 1px 0 color-mix(in oklch, #FFFFFF 12%, transparent), 0 2px 6px oklch(0.05 0.02 270 / 0.45), 0 18px 40px -10px oklch(0.05 0.02 270 / 0.6), 0 40px 72px -28px oklch(0.05 0.02 270 / 0.65); --as-glass-sheen: linear-gradient(115deg, transparent 30%, color-mix(in oklch, #FFFFFF 10%, transparent) 50%, transparent 70%); --as-hero-ink: linear-gradient(120deg, #EFECE8 0%, #C9D3FF 55%, #D9C7FF 100%); --as-p-charge: #34D399; --as-p-swap: #FBBF24; --as-p-air: #38BDF8; --as-p-agri: #A3E635; --as-p-kyc: #A78BFA; --as-glow-charge: #10B981; --as-glow-swap: #F59E0B; --as-glow-air: #0EA5E9; --as-glow-agri: #84CC16; --as-glow-kyc: #8B5CF6; --as-hub-aurora-opacity: 0.45; } } }