/* theme.css — NammaIOT theme engine (iOS-style). * * JS sets two attributes on : data-mode = light|dark (Auto resolved by JS) * data-theme = ocean|sage|violet|ember|sunset|rose * * Accent-based theming (like iOS): surfaces, text and the semantic status colors * (success/warning/danger) depend on light|dark only and stay consistent; each * THEME changes just the brand tint (--accent*). One place to add a theme. * * Native font stack → SF Pro on Apple, Roboto on Android, Segoe UI on Windows. */ :root { --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; color-scheme: dark; } /* ══ Surfaces + semantics by MODE (shared across all themes) ═════════════ */ html[data-mode="dark"] { --bg:#0b0e14; --card:#161b22; --card-hover:#1a2030; --field:#0d1117; --hair:#21262d; --border:#30363d; --border2:#484f58; --text:#e6edf7; --text2:#c9d1d9; --muted:#8b949e; --dim:#6e7681; --success:#3fb950; --success-fill:#238636; --success-bg:#16291a; --warning:#e0a83a; --warning2:#f0c674; --warning-bg:#2d1f0a; --danger:#f85149; --danger-bg:#3d1a1a; --on-fill:#fff; color-scheme: dark; } html[data-mode="light"] { --bg:#f2f2f7; --card:#ffffff; --card-hover:#f6f7f9; --field:#ffffff; --hair:#ececf0; --border:#e2e4ea; --border2:#d1d5db; --text:#16191d; --text2:#3a3f47; --muted:#7a808b; --dim:#9aa0a9; --success:#2ba84a; --success-fill:#2ba84a; --success-bg:#e6f7ea; --warning:#b5811a; --warning2:#8a6410; --warning-bg:#fdf3e0; --danger:#d64540; --danger-bg:#fdeceb; --on-fill:#fff; color-scheme: light; } /* ══ Brand tint by THEME (accent quartet only) ══════════════════════════ */ /* Ocean — blue (default) */ html[data-theme="ocean"][data-mode="dark"] { --accent:#58a6ff; --accent-fill:#1f6feb; --accent-fill-hover:#388bfd; --accent-bg:#16263f; } html[data-theme="ocean"][data-mode="light"] { --accent:#007aff; --accent-fill:#007aff; --accent-fill-hover:#0a6fe0; --accent-bg:#e4eeff; } /* Sage — green */ html[data-theme="sage"][data-mode="dark"] { --accent:#74c98a; --accent-fill:#3f8f5f; --accent-fill-hover:#47a06a; --accent-bg:#16291a; } html[data-theme="sage"][data-mode="light"] { --accent:#2f7d5b; --accent-fill:#2f7d5b; --accent-fill-hover:#2a7052; --accent-bg:#e8f2e6; } /* Violet — purple */ html[data-theme="violet"][data-mode="dark"] { --accent:#b58bff; --accent-fill:#7c4dff; --accent-fill-hover:#8f66ff; --accent-bg:#241a3f; } html[data-theme="violet"][data-mode="light"]{ --accent:#6a3fd0; --accent-fill:#7c4dff; --accent-fill-hover:#6a3ff0; --accent-bg:#efe9ff; } /* Ember — red */ html[data-theme="ember"][data-mode="dark"] { --accent:#ff6b66; --accent-fill:#e5484d; --accent-fill-hover:#f05a5a; --accent-bg:#3a1a1a; } html[data-theme="ember"][data-mode="light"] { --accent:#d43b3b; --accent-fill:#d93b3b; --accent-fill-hover:#c23030; --accent-bg:#fdeaea; } /* Sunset — orange */ html[data-theme="sunset"][data-mode="dark"] { --accent:#ff9f4a; --accent-fill:#e07b1a; --accent-fill-hover:#ef8a28; --accent-bg:#2e1c09; } html[data-theme="sunset"][data-mode="light"]{ --accent:#c2650f; --accent-fill:#d97316; --accent-fill-hover:#c2650f; --accent-bg:#fdeedd; } /* Rose — pink/magenta */ html[data-theme="rose"][data-mode="dark"] { --accent:#ff6fa5; --accent-fill:#e5397a; --accent-fill-hover:#f04d8a; --accent-bg:#3a1626; } html[data-theme="rose"][data-mode="light"] { --accent:#c02a63; --accent-fill:#d6316f; --accent-fill-hover:#c02a63; --accent-bg:#fdeaf1; } /* Fallback before JS sets attributes → Ocean dark. */ :root:not([data-mode]) { --bg:#0b0e14; --card:#161b22; --card-hover:#1a2030; --field:#0d1117; --hair:#21262d; --border:#30363d; --border2:#484f58; --text:#e6edf7; --text2:#c9d1d9; --muted:#8b949e; --dim:#6e7681; --success:#3fb950; --success-fill:#238636; --success-bg:#16291a; --warning:#e0a83a; --warning2:#f0c674; --warning-bg:#2d1f0a; --danger:#f85149; --danger-bg:#3d1a1a; --on-fill:#fff; --accent:#58a6ff; --accent-fill:#1f6feb; --accent-fill-hover:#388bfd; --accent-bg:#16263f; } body { font-family: var(--font) !important; }