Дизайн Артёма

shine-UI/styles/main.css

@@ -1,27 +1,59 @@
 :root {
-  --bg-0: #050c1a;
-  --bg-1: #0a1630;
-  --bg-2: #132346;
-  --card: #162646;
-  --card-soft: #1a2f55;
-  --line: #2f4777;
-  --text: #edf2ff;
-  --text-muted: #9eb0d8;
-  --accent: #d9b56f;
-  --accent-soft: rgba(217, 181, 111, 0.18);
-  --danger: #ff718f;
-  --ok: #84f4a1;
+  --background: #101b20;
+  --surface: #17272d;
+  --surface-selected: #213b3a;
+  --text-primary: #e8f2f1;
+  --text-secondary: #98adaf;
+  --border-subtle: #2a3b40;
+  --border-control: #71888a;
+  --accent: #94e1ce;
+  --on-accent: #102c27;
+  --focus-ring: #94e1ce;
+  --reaction-active: #f29aab;
+  --danger: #ffaba8;
+  --success: #94e1ce;
+  --warning: #e6c184;
+  --scrim: #00000099;
+  --bg-0: var(--background);
+  --bg-1: var(--surface);
+  --bg-2: var(--surface-selected);
+  --card: var(--surface);
+  --card-soft: var(--surface-selected);
+  --line: var(--border-subtle);
+  --text: var(--text-primary);
+  --text-muted: var(--text-secondary);
+  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
+  --ok: var(--success);
   /* Единый цвет основных действий: стартовые/регистрационные кнопки,
    * настройки и scroll-down. */
   --shine-action-blue: #1248a3;
   --shine-action-blue-hover: #1b62cf;
   --shine-action-blue-pressed: #0d3577;
   --shine-action-blue-rgb: 18, 72, 163;
-  --radius-lg: 18px;
+  --radius-lg: 14px;
   --radius-md: 12px;
   --radius-sm: 9px;
-  --shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
-  --font-main: "Manrope", "IBM Plex Sans", "Segoe UI", sans-serif;
+  --shadow: 0 16px 42px rgba(0, 0, 0, 0.26);
+  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+:root[data-theme='light'] {
+  --background: #faf7f0;
+  --surface: #fffdf8;
+  --surface-selected: #efe6d6;
+  --text-primary: #302c25;
+  --text-secondary: #706658;
+  --border-subtle: #e6dfd1;
+  --border-control: #978b79;
+  --accent: #93511e;
+  --on-accent: #fffaf3;
+  --focus-ring: #93511e;
+  --reaction-active: #a43350;
+  --danger: #b13135;
+  --success: #346a48;
+  --warning: #845b14;
+  --scrim: #302c2566;
+  --shadow: 0 16px 42px rgba(65, 49, 28, 0.14);
 }
 
 * {
@@ -37,10 +69,7 @@ body {
   min-height: 100%;
   overflow: hidden;
   overscroll-behavior: none;
-  background:
-    radial-gradient(circle at 12% -8%, rgba(214, 176, 90, 0.24), transparent 35%),
-    radial-gradient(circle at 84% 4%, rgba(43, 78, 148, 0.42), transparent 38%),
-    linear-gradient(180deg, #050b18, #030812 70%) fixed;
+  background: var(--background);
   color: var(--text);
   font-family: var(--font-main);
 }
@@ -72,4 +101,3 @@ a {
 
 
 
-