@morphika/andami 0.5.0 → 0.5.2

package/styles/base.css

@@ -1,114 +1,114 @@
-/* ============================================
-   Brand Design Tokens
-   Values come from site.config.ts palette.
-   Tailwind generates classes: bg-brand-*, text-brand-*, etc.
-
-   NOTE: @import "tailwindcss" is NOT included here.
-   Each instance must add it in their own globals.css BEFORE
-   importing this file.
-   ============================================ */
-
-@theme inline {
-  --color-brand-accent: var(--brand-accent, #888888);
-  --color-brand-accent-alt: var(--brand-accent-alt, #888888);
-  --color-brand-secondary: var(--brand-secondary, #888888);
-  --color-brand-primary: var(--brand-primary, #888888);
-  --color-brand-accent-2: var(--brand-accent-2, #888888);
-  --color-brand-text: var(--brand-text, #ffffff);
-  --color-brand-muted: var(--brand-muted, #888888);
-  --color-brand-dark: var(--brand-dark, #111111);
-
-  --font-mono: var(--brand-font-mono, ui-monospace, monospace);
-  --font-sans: "Inter", system-ui, sans-serif;
-
-  --breakpoint-xs: 0px;
-  --breakpoint-sm: 544px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1170px;
-}
-
-:root {
-  --admin-accent: #076bff;
-  --admin-accent-dark: #0559d4;
-  --admin-accent-shadow: rgba(7, 107, 255, 0.06);
-  --admin-error: #ed3821;
-  --admin-error-dark: #d42f1a;
-  --admin-success: #22c55e;
-}
-
-html {
-  scroll-behavior: smooth;
-  overflow-x: clip;
-  scrollbar-gutter: stable;
-}
-
-body {
-  background: var(--color-brand-dark);
-  color: var(--color-brand-text);
-  font-family: var(--font-sans);
-  overflow-x: clip;
-  width: 100%;
-  transition: background-color 300ms ease;
-}
-
-[data-site] {
-  max-width: 100vw;
-  overflow-x: clip;
-}
-
-/* Prevent text overflow in grid columns on narrow viewports */
-[data-site] p,
-[data-site] h1,
-[data-site] h2,
-[data-site] h3,
-[data-site] h4,
-[data-site] span {
-  word-break: break-word;
-}
-
-[data-custom-cursor] {
-  cursor: none;
-}
-[data-custom-cursor] a,
-[data-custom-cursor] button,
-[data-custom-cursor] [role="button"] {
-  cursor: none;
-}
-
-[data-sanity-studio], [data-sanity-studio] *, [data-ui], [data-ui] * {
-  cursor: auto !important;
-}
-
-::selection {
-  background: var(--color-brand-primary);
-  color: var(--color-brand-text);
-}
-
-img[data-asset-failed] {
-  color: transparent;
-  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
-  min-height: 60px;
-  min-width: 60px;
-  position: relative;
-}
-
-img[data-asset-failed]::after {
-  content: "Tap to retry";
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  font-family: var(--font-sans);
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.7);
-  pointer-events: none;
-}
-
-video[data-asset-failed] {
-  background: #1a1a1a;
-  min-height: 60px;
-}
+/* ============================================
+   Brand Design Tokens
+   Values come from site.config.ts palette.
+   Tailwind generates classes: bg-brand-*, text-brand-*, etc.
+
+   NOTE: @import "tailwindcss" is NOT included here.
+   Each instance must add it in their own globals.css BEFORE
+   importing this file.
+   ============================================ */
+
+@theme inline {
+  --color-brand-accent: var(--brand-accent, #888888);
+  --color-brand-accent-alt: var(--brand-accent-alt, #888888);
+  --color-brand-secondary: var(--brand-secondary, #888888);
+  --color-brand-primary: var(--brand-primary, #888888);
+  --color-brand-accent-2: var(--brand-accent-2, #888888);
+  --color-brand-text: var(--brand-text, #ffffff);
+  --color-brand-muted: var(--brand-muted, #888888);
+  --color-brand-dark: var(--brand-dark, #111111);
+
+  --font-mono: var(--brand-font-mono, ui-monospace, monospace);
+  --font-sans: "Inter", system-ui, sans-serif;
+
+  --breakpoint-xs: 0px;
+  --breakpoint-sm: 544px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1170px;
+}
+
+:root {
+  --admin-accent: #3580f9;
+  --admin-accent-dark: #2d6dd4;
+  --admin-accent-shadow: rgba(53, 128, 249, 0.06);
+  --admin-error: #ed3821;
+  --admin-error-dark: #d42f1a;
+  --admin-success: #22c55e;
+}
+
+html {
+  scroll-behavior: smooth;
+  overflow-x: clip;
+  scrollbar-gutter: stable;
+}
+
+body {
+  background: var(--color-brand-dark);
+  color: var(--color-brand-text);
+  font-family: var(--font-sans);
+  overflow-x: clip;
+  width: 100%;
+  transition: background-color 300ms ease;
+}
+
+[data-site] {
+  max-width: 100vw;
+  overflow-x: clip;
+}
+
+/* Prevent text overflow in grid columns on narrow viewports */
+[data-site] p,
+[data-site] h1,
+[data-site] h2,
+[data-site] h3,
+[data-site] h4,
+[data-site] span {
+  word-break: break-word;
+}
+
+[data-custom-cursor] {
+  cursor: none;
+}
+[data-custom-cursor] a,
+[data-custom-cursor] button,
+[data-custom-cursor] [role="button"] {
+  cursor: none;
+}
+
+[data-sanity-studio], [data-sanity-studio] *, [data-ui], [data-ui] * {
+  cursor: auto !important;
+}
+
+::selection {
+  background: var(--color-brand-primary);
+  color: var(--color-brand-text);
+}
+
+img[data-asset-failed] {
+  color: transparent;
+  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+  min-height: 60px;
+  min-width: 60px;
+  position: relative;
+}
+
+img[data-asset-failed]::after {
+  content: "Tap to retry";
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-family: var(--font-sans);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.7);
+  pointer-events: none;
+}
+
+video[data-asset-failed] {
+  background: #1a1a1a;
+  min-height: 60px;
+}