/* The library owns the palette, spacing scale and typography. theme.css
   repaints the accent tokens for MDM42; nothing else 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 <html> */
.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;
  }
}
/* MDM42 theme (client-console #73, shared with the console).

   The library ships a blue accent for every Akaal product. This file repaints
   the three accent tokens green, sampled from docs/brand/logo.png: the deep
   left stroke (#185848), the gradient centre (#308858) and the light top
   (#50a860-#60b860). The focus rings and the :focus-visible outline are
   defined in the library's base.css in terms of these tokens, so they follow.

   Every value is held to WCAG AA by __tests__/theme.spec.ts: accent and
   accent-dark at 4.5:1 as text on each library background and on the pale
   tint; white on the accent at 4.5:1 in light mode and 3:1 in dark mode, where
   no green clears both lines under the library's white button text.

   This is the one place the brand colour lives. A white-label tenant (api#222)
   sets the same custom properties inline on <html>, which outranks any
   stylesheet, so nothing here needs to change for that. */

:root {
  --color-accent: #1e7a5c;
  --color-accent-pale: #e6f4ec;
  --color-accent-dark: #185848;
}

/* Lighter on dark, as the library does; accent-dark stays the hover, a shade
   under the accent so the hover reads as a press and not a glow. */
.dark {
  --color-accent: #3fa56f;
  --color-accent-pale: #0a2418;
  --color-accent-dark: #36995f;
}
*,
*::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);
}