another step for constructing base project

2026-06-17 22:53:49 +03:30
parent 5b4c0d183f
commit 5388bea320
76 changed files with 3836 additions and 1961 deletions
@@ -0,0 +1,71 @@
+/*
+ * Balinyaar brand color tokens — source of truth for all colors.
+ *
+ * Palette extracted from the seed-deck proposal (balinyaar.html):
+ *   #1d4a40  deep teal / forest-green  → brand primary
+ *   #d98c6a  terracotta                → brand accent (secondary)
+ *   #f3efe9  soft cream                → text-on-dark / glyph fill
+ *   #faf9f5  cream                     → page surface
+ *
+ * MUI sets  data-mui-color-scheme="dark"  on <html> when dark mode is active
+ * (colorSchemeSelector: 'data' in createTheme).  The same attribute drives
+ * every custom CSS rule in this file.  You never need to read or write
+ * this attribute manually — MUI's useColorScheme() does it for you.
+ *
+ * Usage in custom CSS outside MUI:
+ *   color: var(--bal-primary);          ← resolves to the active scheme value
+ *   background: var(--bal-bg-default);
+ */
+
+/* ── Light scheme (default) ────────────────────────────────────────────── */
+:root,
+[data-mui-color-scheme='light'] {
+  /* Primary — deep teal */
+  --bal-primary:          #1d4a40;
+  --bal-primary-light:    #2f6b5e;
+  --bal-primary-dark:     #123029;
+  --bal-primary-contrast: #f3efe9;
+
+  /* Secondary — terracotta */
+  --bal-secondary:          #d98c6a;
+  --bal-secondary-light:    #e6a98a;
+  --bal-secondary-dark:     #bf6f4d;
+  --bal-secondary-contrast: #2a1a12;
+
+  /* Surfaces */
+  --bal-bg-default: #faf9f5;
+  --bal-bg-paper:   #ffffff;
+
+  /* Text */
+  --bal-text-primary:   #1b2521;
+  --bal-text-secondary: #5b655f;
+
+  /* Divider */
+  --bal-divider: rgba(29, 74, 64, 0.14);
+}
+
+/* ── Dark scheme ────────────────────────────────────────────────────────── */
+[data-mui-color-scheme='dark'] {
+  /* Primary — lifted teal (readable on dark surfaces) */
+  --bal-primary:          #6fc0ac;
+  --bal-primary-light:    #8fd2c1;
+  --bal-primary-dark:     #3f8a78;
+  --bal-primary-contrast: #06120f;
+
+  /* Secondary — warm terracotta-light */
+  --bal-secondary:          #e6a98a;
+  --bal-secondary-light:    #f0bfa3;
+  --bal-secondary-dark:     #d98c6a;
+  --bal-secondary-contrast: #2a1a12;
+
+  /* Surfaces — deep teal */
+  --bal-bg-default: #0f1c19;
+  --bal-bg-paper:   #16302a;
+
+  /* Text */
+  --bal-text-primary:   #f3efe9;
+  --bal-text-secondary: #9fb0a9;
+
+  /* Divider */
+  --bal-divider: rgba(243, 239, 233, 0.14);
+}