refactor(css): maximize usage of variables (1st part, to simplify CSS & style)

note: there is still work to do, but has there are risks to conflict I prefer to commit this first part now

static/css/views/device-verify.css

@@ -1,17 +1,4 @@
 /* device-verify.css — stand-alone styles for the device authorization page */
-:root {
-    --primary: #2563eb;
-    --primary-hover: #1d4ed8;
-    --danger: #dc2626;
-    --danger-hover: #b91c1c;
-    --success: #16a34a;
-    --bg: #f8fafc;
-    --card: #ffffff;
-    --text: #1e293b;
-    --muted: #64748b;
-    --border: #e2e8f0;
-    --radius: 12px;
-}
 * {
     box-sizing: border-box;
     margin: 0;
@@ -19,8 +6,8 @@
 }
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    background: var(--bg);
-    color: var(--text);
+    background: var(--color-bg-hover);
+    color: var(--color-text-heading);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -28,9 +15,9 @@ body {
     padding: 1rem;
 }
 .card {
-    background: var(--card);
-    border-radius: var(--radius);
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+    background: var(--color-bg-surface);
+    border-radius: var(--radius, 12px);
+    box-shadow: 0 4px 24px var(--color-shadow-sm);
     padding: 2.5rem;
     max-width: 440px;
     width: 100%;
@@ -44,14 +31,14 @@ body {
     font-weight: 700;
 }
 .logo span {
-    color: var(--primary);
+    color: var(--color-primary);
 }
 h2 {
     font-size: 1.15rem;
     margin-bottom: 0.5rem;
 }
 p.subtitle {
-    color: var(--muted);
+    color: var(--color-text-gray);
     font-size: 0.9rem;
     margin-bottom: 1.5rem;
 }
@@ -68,16 +55,16 @@ input[type="text"] {
     letter-spacing: 0.15em;
     text-align: center;
     text-transform: uppercase;
-    border: 2px solid var(--border);
+    border: 2px solid var(--color-border);
     border-radius: 8px;
     outline: none;
     transition: border-color 0.2s;
 }
 input[type="text"]:focus {
-    border-color: var(--primary);
+    border-color: var(--color-primary);
 }
 .device-info {
-    background: #f1f5f9;
+    background: var(--color-border-light);
     border-radius: 8px;
     padding: 1rem;
     margin: 1rem 0;
@@ -88,7 +75,7 @@ input[type="text"]:focus {
     margin-bottom: 0.3rem;
 }
 .device-info .label {
-    color: var(--muted);
+    color: var(--color-text-gray);
     font-size: 0.85rem;
 }
 .device-info .value {
@@ -111,18 +98,18 @@ button {
     transition: background 0.2s;
 }
 .btn-approve {
-    background: var(--primary);
-    color: #fff;
+    background: var(--color-primary);
+    color: var(--color-danger-text);
 }
 .btn-approve:hover {
-    background: var(--primary-hover);
+    background: var(--color-primary-hover);
 }
 .btn-deny {
-    background: var(--danger);
-    color: #fff;
+    background: var(--color-error-text);
+    color: var(--color-danger-text);
 }
 .btn-deny:hover {
-    background: var(--danger-hover);
+    background: var(--color-danger-bg-hover);
 }
 button:disabled {
     opacity: 0.5;
@@ -136,19 +123,19 @@ button:disabled {
     font-weight: 600;
 }
 .status.success {
-    background: #dcfce7;
-    color: var(--success);
+    background: var(--color-success-bg);
+    color: var(--color-success-text);
 }
 .status.denied {
-    background: #fef2f2;
-    color: var(--danger);
+    background: var(--color-danger-light-bg);
+    color: var(--color-error-text);
 }
 .status.error {
-    background: #fef2f2;
-    color: var(--danger);
+    background: var(--color-danger-light-bg);
+    color: var(--color-error-text);
 }
 .error-text {
-    color: var(--danger);
+    color: var(--color-error-text);
     font-size: 0.85rem;
     margin-top: 0.5rem;
 }