/* Design tokens. Brand values (--m-primary, --m-accent, --m-radius, --m-density, --m-font)
   are emitted by the server in <style id="micosta-theme">; everything else derives from them.

   Breakpoints (mobile first, rules for wider screens under min-width):
     sm 40rem  (640px)  two-column layouts, dual lists, hidden environment badge
     md 48rem  (768px)  tablet: segmented labels, dashboard columns, list page fills the viewport
     lg 64rem  (1024px) desktop: the sidebar is a column instead of a drawer
     xl 80rem  (1280px) breadcrumbs in the top bar, filters as a side panel
   max-width queries are only used where a narrow screen needs its own rules that must not
   leak upwards: column priorities (list_column_priority), the device switcher of the view
   segmented control, the responsive table-to-cards mode and the phone-only sticky columns.
   Breakpoint values end in .99rem in those queries so they never overlap the min-width ones. */
:root {
  --m-primary-hover: color-mix(in oklab, var(--m-primary), black 12%);
  --m-primary-soft: color-mix(in oklab, var(--m-primary), transparent 88%);
  --m-on-color: #fff;  /* text and icons on a solid colour (primary, success, danger…) */
  --m-primary-contrast: var(--m-on-color);
  --m-accent-soft: color-mix(in oklab, var(--m-accent), transparent 85%);
  /* "Ink" shades: the colour used for text, icons, links and active states. Same as the fill
     colour in light mode; lifted towards white in dark mode so they stay readable on grey. */
  --m-primary-ink: var(--m-primary);
  --m-accent-ink: var(--m-accent);

  --m-success: #16a34a;
  /* Chart palette (dashboards); the primary comes first, the rest are distinct hues */
  --m-chart-1: var(--m-primary); --m-chart-2: #0ea5e9; --m-chart-3: #f59e0b; --m-chart-4: #10b981; --m-chart-5: #8b5cf6; --m-chart-6: #ef4444; --m-chart-7: #14b8a6; --m-chart-8: #f472b6;
  --m-info: #0284c7;
  --m-warning: #d97706;
  --m-danger: #dc2626;
  --m-success-ink: var(--m-success);
  --m-info-ink: var(--m-info);
  --m-warning-ink: var(--m-warning);
  --m-danger-ink: var(--m-danger);
  --m-secondary: #64748b;
  /* Soft tints: badge, chip and icon backgrounds behind the matching -ink colour */
  --m-success-soft: color-mix(in oklab, var(--m-success), transparent 85%);
  --m-info-soft: color-mix(in oklab, var(--m-info), transparent 85%);
  --m-warning-soft: color-mix(in oklab, var(--m-warning), transparent 85%);
  --m-danger-soft: color-mix(in oklab, var(--m-danger), transparent 85%);
  --m-secondary-soft: color-mix(in oklab, var(--m-secondary), transparent 85%);

  --m-bg: #f4f5f7;
  --m-surface: #ffffff;
  --m-surface-2: #f8fafc;
  --m-surface-3: #eef2f6;
  --m-border: #e2e8f0;
  --m-border-strong: #cbd5e1;
  --m-fg: #334155;
  --m-fg-muted: #64748b;
  --m-fg-strong: #0f172a;
  --m-shadow: 0 1px 2px rgb(15 23 42 / .06), 0 1px 3px rgb(15 23 42 / .08);
  --m-shadow-lg: 0 10px 30px rgb(15 23 42 / .15);
  --m-shadow-edge: rgb(15 23 42 / .15);  /* the shadow cast by sticky table columns */
  --m-backdrop: rgb(15 23 42 / .5);  /* behind drawers, modals and side panels */
  --m-focus: 0 0 0 3px color-mix(in oklab, var(--m-primary), transparent 65%);
  --m-ring: 0 0 0 2px var(--m-primary-soft);  /* selected card, refreshed widget */
  /* Radii derive from the brand radius (server-emitted --m-radius) */
  --m-radius-sm: calc(var(--m-radius) * .75);
  --m-radius-lg: calc(var(--m-radius) * 1.5);
  --m-radius-pill: 999px;

  --m-space: calc(0.25rem * var(--m-density));
  --m-sidebar-width: 16.5rem;
  --m-sidebar-collapsed: 4rem;
  --m-topbar-height: 3.5rem; --m-bottombar-height: 3.75rem;
  --m-font-size: 0.9375rem;
  --m-font-size-sm: 0.8125rem;
  --m-font-size-xs: 0.75rem;
  --m-font-size-2xs: 0.65rem;
  --m-font-size-lg: 1.05rem;
  --m-font-size-xl: 1.25rem;
  --m-font-size-2xl: 1.5rem;
  /* Stacking order, lowest to highest: sticky cells < bars (topbar, bottombar) < panels
     (sidebar, filters drawer) < popovers (dropdowns, comboboxes, calendars, row menus)
     < overlays (full-screen editors, customise panel, theme builder) < toasts. */
  --m-z-sticky: 10;
  --m-z-bar: 20;
  --m-z-panel: 30;
  --m-z-popover: 40;
  --m-z-overlay: 50;
  --m-z-toast: 60;

  /* Surface variants for the two bars; selected by classes on <html>. */
  --m-sidebar-bg: #0f172a;
  --m-sidebar-fg: #cbd5e1;
  --m-sidebar-fg-strong: #ffffff;
  --m-sidebar-muted: #94a3b8;
  --m-sidebar-hover: rgb(255 255 255 / .06);
  --m-sidebar-active: var(--m-accent-soft);
  --m-sidebar-active-fg: #ffffff;
  --m-sidebar-border: rgb(255 255 255 / .08);
  --m-topbar-bg: var(--m-surface);
  --m-topbar-fg: var(--m-fg);
  --m-topbar-fg-strong: var(--m-fg-strong);
  --m-topbar-border: var(--m-border);
  color-scheme: light;
}

html.sidebar-light {
  --m-sidebar-bg: var(--m-surface);
  --m-sidebar-fg: var(--m-fg);
  --m-sidebar-fg-strong: var(--m-fg-strong);
  --m-sidebar-muted: var(--m-fg-muted);
  --m-sidebar-hover: var(--m-surface-3);
  --m-sidebar-active: var(--m-primary-soft);
  --m-sidebar-active-fg: var(--m-primary-ink);
  --m-sidebar-border: var(--m-border);
}
html.navbar-dark {
  --m-topbar-bg: #0f172a;
  --m-topbar-fg: #e2e8f0;
  --m-topbar-fg-strong: #ffffff;
  --m-topbar-border: rgb(255 255 255 / .08);
}
html.navbar-primary {
  --m-topbar-bg: var(--m-primary);
  --m-topbar-fg: var(--m-primary-contrast);
  --m-topbar-fg-strong: var(--m-primary-contrast);
  --m-topbar-border: color-mix(in oklab, var(--m-primary), black 15%);
}

html.theme-dark {
  color-scheme: dark;
  /* Neutral greys in the spirit of macOS dark mode: #545554 is the base surface, the page sits a
     step darker and every raised layer a step lighter; text is white at ~85 %. */
  --m-bg: #474847;
  --m-surface: #545554;
  --m-surface-2: #5c5d5c;
  --m-surface-3: #666766;
  --m-border: #656665;
  --m-border-strong: #7a7b7a;
  --m-fg: #dcdcdc;
  --m-fg-muted: #b3b4b3;
  --m-fg-strong: #f5f5f5;
  --m-shadow: 0 1px 2px rgb(0 0 0 / .35);
  --m-shadow-lg: 0 10px 30px rgb(0 0 0 / .45);
  --m-primary-hover: color-mix(in oklab, var(--m-primary), white 12%);
  --m-primary-ink: var(--m-primary-dark, color-mix(in oklab, var(--m-primary), white 38%));
  --m-accent-ink: var(--m-accent-dark, color-mix(in oklab, var(--m-accent), white 30%));
  --m-success-ink: color-mix(in oklab, var(--m-success), white 30%);
  --m-info-ink: color-mix(in oklab, var(--m-info), white 30%);
  --m-warning-ink: color-mix(in oklab, var(--m-warning), white 25%);
  --m-danger-ink: color-mix(in oklab, var(--m-danger), white 30%);
  /* Dark surfaces swallow faint tints: a little more colour so the badges keep their hue */
  --m-success-soft: color-mix(in oklab, var(--m-success), transparent 78%);
  --m-info-soft: color-mix(in oklab, var(--m-info), transparent 78%);
  --m-warning-soft: color-mix(in oklab, var(--m-warning), transparent 78%);
  --m-danger-soft: color-mix(in oklab, var(--m-danger), transparent 78%);
  --m-secondary-soft: color-mix(in oklab, var(--m-secondary), transparent 78%);
  --m-shadow-edge: rgb(0 0 0 / .35);
  --m-backdrop: rgb(0 0 0 / .55);
}
html.theme-dark.sidebar-light {
  --m-sidebar-bg: var(--m-surface);
  --m-sidebar-hover: var(--m-surface-3);
  --m-sidebar-border: var(--m-border);
}
html.theme-dark.navbar-light { --m-topbar-bg: var(--m-surface); --m-topbar-fg: var(--m-fg); --m-topbar-fg-strong: var(--m-fg-strong); --m-topbar-border: var(--m-border); }
@media print { html.theme-dark { color-scheme: light; } }