/* Agent Aqua theme — dusk-premium. A dark, atmospheric base (deep twilight ink) with an aqua/cyan accent for water and a green for healthy/watered. Drives both web and (later) native via Ionic CSS variables. Supports Light, Dark, and System themes; the active palette is toggled via the `ion-palette-dark` class on (managed by ThemeContext). */ :root { /* Primary — aqua/sky */ --ion-color-primary: #2dd4ff; --ion-color-primary-rgb: 45, 212, 255; --ion-color-primary-contrast: #04141c; --ion-color-primary-contrast-rgb: 4, 20, 28; --ion-color-primary-shade: #28bbe0; --ion-color-primary-tint: #43d9ff; /* Secondary — deep ocean */ --ion-color-secondary: #0369a1; --ion-color-secondary-rgb: 3, 105, 161; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255, 255, 255; --ion-color-secondary-shade: #035c8e; --ion-color-secondary-tint: #1c78aa; /* Success — growth green (watered / healthy) */ --ion-color-success: #34d399; --ion-color-success-rgb: 52, 211, 153; --ion-color-success-contrast: #04140d; --ion-color-success-contrast-rgb: 4, 20, 13; --ion-color-success-shade: #2eba87; --ion-color-success-tint: #48d7a3; /* Warning — attention amber */ --ion-color-warning: #fbbf24; --ion-color-warning-rgb: 251, 191, 36; --ion-color-warning-contrast: #1b1300; --ion-color-warning-contrast-rgb: 27, 19, 0; --ion-color-warning-shade: #dda820; --ion-color-warning-tint: #fbc53a; /* Danger */ --ion-color-danger: #f87171; --ion-color-danger-rgb: 248, 113, 113; --ion-color-danger-contrast: #1a0606; --ion-color-danger-contrast-rgb: 26, 6, 6; --ion-color-danger-shade: #da6363; --ion-color-danger-tint: #f97f7f; --ion-font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Light-mode surfaces (default; overridden below for dark). */ --ion-background-color: #f4f8fc; --ion-background-color-rgb: 244, 248, 252; --ion-text-color: #0a121c; --ion-text-color-rgb: 10, 18, 28; --ion-card-background: #ffffff; --ion-item-background: #ffffff; --ion-toolbar-background: #f4f8fc; --ion-tab-bar-background: rgba(244, 248, 252, 0.9); --ion-border-color: rgba(0, 0, 0, 0.1); --ion-color-step-50: #eef3f8; --ion-color-step-100: #e3eaf1; --ion-color-step-150: #d8e1ea; --ion-color-step-200: #cdd8e3; --ion-color-step-250: #c2cfdc; --ion-color-step-300: #b7c6d5; --ion-color-step-400: #9db4c6; --ion-color-step-500: #83a2b8; --ion-color-step-600: #6485a0; --ion-color-step-700: #486b87; --ion-color-step-800: #2e4f6c; --ion-color-step-900: #163551; } /* Dark palette — recolours Ionic to our twilight ink. Applied when the `ion-palette-dark` class is present on (via dark.class.css). */ :root.ion-palette-dark { --ion-background-color: #0a121c; --ion-background-color-rgb: 10, 18, 28; --ion-text-color: #eaf2f8; --ion-text-color-rgb: 234, 242, 248; /* Card / item / toolbar surfaces sit slightly above the page ink. */ --ion-card-background: #111c29; --ion-item-background: #111c29; --ion-toolbar-background: #0a121c; --ion-tab-bar-background: rgba(10, 18, 28, 0.86); --ion-border-color: rgba(255, 255, 255, 0.08); --ion-color-step-50: #131e2b; --ion-color-step-100: #1a2735; --ion-color-step-150: #213040; --ion-color-step-200: #28384a; --ion-color-step-250: #2f4254; --ion-color-step-300: #364b5f; --ion-color-step-400: #4d6378; --ion-color-step-500: #647b91; --ion-color-step-600: #8295a8; --ion-color-step-700: #a1b1bf; --ion-color-step-800: #c1cdd7; --ion-color-step-900: #e0e8ef; }