/* The library owns the palette, spacing scale and typography. Nothing here redefines a token; this file only sets what a document needs. *//* Akaal Creatives — Design Tokens */ :root { /* Colours — light mode */ --color-ink: #2a2a2a; --color-ink-mid: #333333; --color-subtle: #6b6b6b; --color-muted: #cccccc; --color-rule: #e8e8e8; --color-off-white: #fafafa; --color-accent: #2563eb; --color-accent-pale: #eff4fe; --color-accent-dark: #1d4ed8; --color-background: #ffffff; --color-background-surface: #f7f7f7; --color-background-ink: #f2f2f2; /* Typography */ --font-display: 'Fraunces', ui-serif, serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Letter spacing */ --tracking-label: 0.2em; --tracking-logo: 0.12em; --tracking-nav: 0.04em; } /* Dark mode overrides — add class="dark" to */ .dark { --color-ink: #efefef; --color-ink-mid: #cccccc; --color-subtle: #888888; --color-muted: #3a3a3a; --color-rule: #2c2c2c; --color-off-white: #1c1c1c; --color-accent: #3b82f6; --color-accent-pale: #172038; --color-accent-dark: #2563eb; --color-background: #141414; --color-background-surface: #1c1c1c; --color-background-ink: #0e0e0e; } :root { /* Spacing — 8px grid */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Focus ring */ --focus-ring: 0 0 0 3px var(--color-accent-pale); --focus-ring-accent: 0 0 0 3px var(--color-accent); /* z-index scale */ --z-base: 10; --z-dropdown: 20; --z-modal: 30; --z-toast: 50; /* Transitions */ --transition-fast: 100ms cubic-bezier(0, 0, 0.2, 1); --transition-base: 150ms cubic-bezier(0, 0, 0.2, 1); --transition-slow: 250ms cubic-bezier(0, 0, 0.2, 1); /* Semantic colours — feedback */ --color-success: #16a34a; --color-success-pale: #f0fdf4; --color-warning: #d97706; --color-warning-pale: #fffbeb; --color-error: #dc2626; --color-error-pale: #fef2f2; /* Device and fleet states. Aliases of the feedback colours, so contrast and the dark-mode overrides are inherited and there is one palette to keep accessible. */ --color-state-converged: var(--color-success); --color-state-converged-pale: var(--color-success-pale); --color-state-pending: var(--color-warning); --color-state-pending-pale: var(--color-warning-pale); --color-state-non-compliant: var(--color-error); --color-state-non-compliant-pale: var(--color-error-pale); --color-state-offline: var(--color-subtle); --color-state-offline-pale: var(--color-background-surface); --color-state-destructive: var(--color-error); --color-state-destructive-pale: var(--color-error-pale); } .dark { --color-success: #22c55e; --color-success-pale: #052e16; --color-warning: #f59e0b; --color-warning-pale: #1c1000; --color-error: #ef4444; --color-error-pale: #1c0000; } /* Accessibility — focus visible */ :focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; background: var(--color-background); color: var(--color-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } /* Visible to screen readers, invisible on screen. Used for the words that accompany a colour or an icon, so colour is never the only signal. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* The library paints a warning-toned field hint with --color-warning, a token graded for borders and badges: about 3.2:1 on the light background, short of the 4.5:1 small text needs. Until the library carries a text-grade warning token, this one repaints the hint (amber-800 in light; the dark token already passes). Removed once @aka/ui ships its own. */ :root { --color-warning-ink: #92400e; } .dark { --color-warning-ink: var(--color-warning); } .app-schema-field .app-schema-field__hint.app-schema-field__hint--warning { color: var(--color-warning-ink); } /* The library has no destructive button variant, so an outline button is repainted with the error token. Shared here so no dialog carries its own copy. */ .danger-button { border-color: var(--color-error); color: var(--color-error); } .danger-button:hover:not(:disabled) { background: var(--color-error-pale); }