/* 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 has no destructive button variant, so an outline button that confirms something irreversible is repainted with the error token. Anchored on the library classes so the rule outranks the component's own outline styling wherever the two land in the cascade. Hover inverts rather than tinting: red on the pale red is under the 4.5:1 line. */ .app-button.app-button--outline.danger-button { border-color: var(--color-error); color: var(--color-error); } .app-button.app-button--outline.danger-button:hover:not(:disabled) { background: var(--color-error); color: var(--color-background); }