/* Wanaku Suite design tokens. * Canonical source: wanaku-portal/app/globals.css * Drop-in custom properties for any web surface. Dark mode via a `.dark` class * on a parent (set or scope it). Mirror of tokens.json. */ :root { --brand: #2c6ad4; --brand-hover: #21539f; --brand-fg: #ffffff; --brand-subtle: #e6f0fe; --accent: #e8b338; --accent-fg: #002952; --background: #f6f8fb; --surface: #ffffff; --surface-2: #e9edf2; --foreground: #002952; --muted: #5c6b79; --muted-2: #8b97a2; --border: #dee4ec; --border-strong: #c5cfda; --success: #1b9a66; --success-subtle: #e3f4ec; --warning: #b5840f; --warning-subtle: #fbf0d4; --danger: #d8493c; --danger-subtle: #fbe7e4; --ring: #508ff7; /* Type */ --font-sans: "Inter", system-ui, sans-serif; --font-display: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; /* Radius */ --radius-badge: 8px; --radius-card: 6px; /* web cards; iOS uses 12 */ --radius-tile: 8px; /* Tint wash for icon chips / KPI cards: accent at ~10% (hex suffix 1A) */ --wash: 0.10; } .dark { --brand: #6fa6ff; --brand-hover: #8fbaff; --brand-fg: #06223f; --brand-subtle: #15294a; --accent: #e8b338; --accent-fg: #1a1410; --background: #0b1622; --surface: #122033; --surface-2: #1a2b40; --foreground: #e8eef5; --muted: #9db0c2; --muted-2: #6f8298; --border: #26384f; --border-strong: #38506b; --success: #34c58a; --success-subtle: #0f3325; --warning: #e0a52e; --warning-subtle: #3a2d10; --danger: #f0625a; --danger-subtle: #3a1a18; --ring: #6fa6ff; }