ha_permissions/ui/index.css

@import "./login/index.css";

/*
Background layers

--bg-base: #14171c — app background
--bg-surface: #1c2027 — cards/panels
--bg-surface-raised: #262b34 — modals, dropdowns, hover states
--bg-inset: #0e1014 — sunken elements (input fields, code blocks)

Text

--text-primary: #eef1f5
--text-secondary: #9aa3af
--text-tertiary: #5c6470

Accent (interactive/brand)

--accent: #4f9cf9 — primary actions, active toggles, links
--accent-hover: #6bacfa
--accent-muted: #2a3b52 — subtle backgrounds for selected/active rows

Borders

--border-subtle: #2a2f38
--border-strong: #3a4049
Semantic / device-state colors

These matter a lot for a HA UI since you're constantly showing on/off, alerts, and sensor readings:

--state-on: #f5b942 — entity "on" (warm amber reads well as "light is on," avoids clashing with accent blue)
--state-off: #4a5058 — entity "off" (neutral gray, not red — off isn't an error)
--success: #4caf7d — armed, locked, connected, healthy
--warning: #e8a33d — low battery, unavailable-but-not-critical
--danger: #e5484d — alarm triggered, offline, critical sensor
--info: #4f9cf9 — same as accent, reuse for info badges
*/

:root {
  /* Backgrounds */
  --bg-base: #14171c;
  --bg-surface: #1c2027;
  --bg-surface-raised: #262b34;
  --bg-inset: #0e1014;

  /* Text */
  --text-primary: #eef1f5;
  --text-secondary: #9aa3af;
  --text-tertiary: #5c6470;

  /* Accent */
  --accent: #4f9cf9;
  --accent-hover: #6bacfa;
  --accent-muted: #2a3b52;

  /* Borders */
  --border-subtle: #2a2f38;
  --border-strong: #3a4049;

  /* Semantic / device state */
  --state-on: #f5b942;
  --state-off: #4a5058;
  --success: #4caf7d;
  --warning: #e8a33d;
  --danger: #e5484d;
  --info: #4f9cf9;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html{
    height: 100%;
    width: 100%;
}

body{
    background: var(--bg-base);
    color: var(--text-primary);
}