/*
 * <auto-generated>
 * Generated from design-system/entropia-tokens.json by tools/Entropia.Codegen.
 * Do not edit by hand. Run the codegen tool's "generate" verb to regenerate.
 * </auto-generated>
 *
 * NOTE: the shared colour + status tokens below are the Warm Earth + Coral
 * palette defined in design-system/entropia-tokens.json. The web-only extras
 * (ink-strong, ink-inverse, surface-sunken, line-strong, rail-*, brand-primary-soft,
 * brand-primary-border, on-brand, shadows, status soft tints, font-scale, type
 * tracking, z-index, motion) are hand-maintained here because the token JSON and
 * its generators model only the shared subset consumed by the PDA and Desktop.
 * Keep the shared values in sync with the JSON; keep the extras in sync with
 * components.css and site.css.
 */

:root {
  /* color-scheme tells the browser (and native <select> option popups, scrollbars,
     date pickers) to render in light mode. The dark blocks below override it. */
  color-scheme: light;

  /* Space */
  --entropia-space-xs: 4px;
  --entropia-space-sm: 8px;
  --entropia-space-md: 12px;
  --entropia-space-lg: 16px;
  --entropia-space-xl: 24px;
  --entropia-space-xxl: 32px;

  /* Radius — hard industrial geometry: zero rounding everywhere */
  --entropia-radius-sm: 0px;
  --entropia-radius-md: 0px;
  --entropia-radius-lg: 0px;
  --entropia-radius-xl: 0px;

  /* Dimens. touch-min is the floor for any interactive target. */
  --entropia-dimen-tile-height: 92px;
  --entropia-dimen-button-height: 40px;
  --entropia-dimen-scan-field-height: 64px;
  --entropia-dimen-row-height: 56px;
  --entropia-dimen-touch-min: 48px;
  --entropia-dimen-commit-bar-height: 88px;
  --entropia-dimen-rail-width: 256px;
  --entropia-dimen-rail-width-collapsed: 64px;
  --entropia-dimen-chrome-height: 32px;
  --entropia-dimen-grid-row-height: 36px;
  --entropia-dimen-toolbar-height: 44px;
  --entropia-dimen-status-bar-height: 28px;
  --entropia-dimen-tile-min-width: 220px;
  --entropia-dimen-tile-min-height: 170px;
  --entropia-dimen-topbar-height: 56px;

  /* UX-17: font scale multiplier. */
  --entropia-font-scale: 1;

  /* Type — Inter Display + Text variant, denser than the previous scale */
  --entropia-type-display-size: 32px;
  --entropia-type-display-line-height: 40px;
  --entropia-type-display-weight: 600;
  --entropia-type-display-tracking: -0.02em;

  --entropia-type-title-size: 20px;
  --entropia-type-title-line-height: 28px;
  --entropia-type-title-weight: 600;

  --entropia-type-subtitle-size: 15px;
  --entropia-type-subtitle-line-height: 22px;
  --entropia-type-subtitle-weight: 500;

  --entropia-type-body-strong-size: 14px;
  --entropia-type-body-strong-line-height: 20px;
  --entropia-type-body-strong-weight: 500;
  --entropia-type-body-size: 14px;
  --entropia-type-body-line-height: 20px;
  --entropia-type-body-weight: 400;
  --entropia-type-caption-size: 12px;
  --entropia-type-caption-line-height: 16px;
  --entropia-type-caption-weight: 400;
  --entropia-type-caption-tracking: 0.02em;
  --entropia-type-mono: var(--entropia-font-mono);

  /* Font stacks — declared once here so every consumer (grid.css, components.css,
     App.razor) resolves the same grotesque + mono in light and dark, including
     the platform fallback while Inter / JetBrains Mono is still loading
     (font-display swap registers the face before the woff2 finishes). */
  --entropia-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --entropia-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* ─────────────────────────────────────────────────────────────────────
     Warm Earth + Coral palette (2026 redesign)
     ─────────────────────────────────────────────────────────────────────
     The visual system is built on three pillars:
     • Warm stone/parchment — the structural scale (surfaces, text, lines).
     • Coral — the brand identity / primary action. Coral leans orange so it
       stays distinct from the crimson danger channel; red is reserved for
       alarms and outright rejections, never spent on the primary action.
     • Amber-500 — alerts and operator attention only.
     Every other color (success, danger, info, surface tints) is a derivative.
     Switching data-theme re-tints every surface, text, line, rail and accent
     together — light reads as a sunlit parchment workshop, dark as a warm
     espresso console.
     ─────────────────────────────────────────────────────────────────── */

  /* Brand */

  --entropia-color-brand-primary: #2563EB;
  --entropia-color-brand-primary-strong: #1D4ED8;
  --entropia-color-brand-action: #1D4ED8;
  --entropia-color-on-brand: #FFFFFF;
  --entropia-color-brand-primary-soft: #DBEAFE;
  --entropia-color-brand-accent: #0F172A;

  /* Industrial neutral scale */
  --entropia-color-ink: #0F172A;
  --entropia-color-ink-strong: #020617;
  --entropia-color-ink-muted: #475569;
  --entropia-color-ink-soft: #64748B;
  --entropia-color-ink-inverse: #F8FAFC;

  /* Surfaces — white / black / blue only */
  --entropia-color-canvas: #EEF3F9;
  --entropia-color-surface: #F8FBFF;
  --entropia-color-surface-raised: #FFFFFF;
  --entropia-color-surface-sunken: #E8EEF6;
  --entropia-color-line: #D5DFEA;
  --entropia-color-line-strong: #BECADA;

  /* Sidebar — dark slate, not brown */
  --entropia-color-rail-bg: #111827;
  --entropia-color-rail-bg-hover: #1F2937;
  --entropia-color-rail-text: #CBD5E1;
  --entropia-color-rail-text-strong: #F8FAFC;
  --entropia-color-rail-text-muted: #94A3B8;
  --entropia-color-rail-divider: #243244;
  --entropia-color-rail-active-bg: #2563EB;
  --entropia-color-rail-active-text: #FFFFFF;

  /* Status semantics */
  --entropia-color-success: #15803D;
  --entropia-color-success-soft: #DCFCE7;
  --entropia-color-warning: #B45309;
  --entropia-color-warning-soft: #FEF3C7;
  --entropia-color-danger: #B91C1C;
  --entropia-color-danger-soft: #FEE2E2;
  --entropia-color-info: #2563EB;
  --entropia-color-info-soft: #DBEAFE;

  /* Status tones */
  --entropia-status-neutral-fg: #475569;
  --entropia-status-neutral-bg: #EEF3F9;
  --entropia-status-neutral-border: #D5DFEA;
  --entropia-status-info-fg: #1D4ED8;
  --entropia-status-info-bg: #DBEAFE;
  --entropia-status-info-border: #93C5FD;
  --entropia-status-success-fg: #166534;
  --entropia-status-success-bg: #DCFCE7;
  --entropia-status-success-border: #86EFAC;
  --entropia-status-pending-fg: #0F766E;
  --entropia-status-pending-bg: #CCFBF1;
  --entropia-status-pending-border: #99F6E4;
  --entropia-status-warning-fg: #92400E;
  --entropia-status-warning-bg: #FEF3C7;
  --entropia-status-warning-border: #FCD34D;
  --entropia-status-danger-fg: #991B1B;
  --entropia-status-danger-bg: #FEE2E2;
  --entropia-status-danger-border: #FCA5A5;
  --entropia-status-blocked-fg: #312E81;
  --entropia-status-blocked-bg: #E0E7FF;
  --entropia-status-blocked-border: #A5B4FC;

  /* Shadows — cool, restrained, square */
  --entropia-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --entropia-shadow-md: 0 3px 8px rgba(15, 23, 42, 0.06);
  --entropia-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);
  --entropia-shadow-focus: 0 0 0 2px rgba(37, 99, 235, 0.22);

  /* Animation — fast and deliberate, never bouncy */
  --entropia-duration-fast: 80ms;
  --entropia-duration-medium: 160ms;
  --entropia-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Z-index */
  --entropia-z-rail: 40;
  --entropia-z-topbar: 30;
  --entropia-z-dropdown: 50;
  --entropia-z-toast: 80;
  --entropia-z-modal: 100;
}

[data-theme="dark"] {
  color-scheme: dark;
  --entropia-color-brand-primary: #60A5FA;
  --entropia-color-brand-primary-strong: #93C5FD;
  --entropia-color-brand-action: #2563EB;
  --entropia-color-on-brand: #FFFFFF;
  --entropia-color-brand-primary-soft: #10233F;
  --entropia-color-brand-accent: #E2E8F0;

  --entropia-color-ink: #E5EEF9;
  --entropia-color-ink-strong: #F8FAFC;
  --entropia-color-ink-muted: #A9B7CA;
  --entropia-color-ink-soft: #7F90A8;
  --entropia-color-ink-inverse: #0B1220;

  --entropia-color-canvas: #0B1220;
  --entropia-color-surface: #111827;
  --entropia-color-surface-raised: #172132;
  --entropia-color-surface-sunken: #0D1523;
  --entropia-color-line: #243244;
  --entropia-color-line-strong: #334155;

  --entropia-color-rail-bg: #0A0F18;
  --entropia-color-rail-bg-hover: #131C2A;
  --entropia-color-rail-text: #CBD5E1;
  --entropia-color-rail-text-strong: #F8FAFC;
  --entropia-color-rail-text-muted: #94A3B8;
  --entropia-color-rail-divider: #1E293B;
  --entropia-color-rail-active-bg: #2563EB;
  --entropia-color-rail-active-text: #FFFFFF;

  --entropia-color-success: #4ADE80;
  --entropia-color-success-soft: #0F2217;
  --entropia-color-warning: #F59E0B;
  --entropia-color-warning-soft: #2A1B05;
  --entropia-color-danger: #F87171;
  --entropia-color-danger-soft: #311313;
  --entropia-color-info: #60A5FA;
  --entropia-color-info-soft: #0E223F;

  --entropia-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --entropia-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --entropia-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --entropia-shadow-focus: 0 0 0 2px rgba(96, 165, 250, 0.28);
}


/*
 * Dark follows the OS by default. An explicit data-theme on <html> wins over the
 * media query in both directions, so an operator on a bright dock can force light
 * on a machine set to dark, and a night shift can force dark on a machine set to light.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --entropia-color-brand-primary: #60A5FA;
    --entropia-color-brand-primary-strong: #93C5FD;
    --entropia-color-brand-action: #2563EB;
    --entropia-color-on-brand: #FFFFFF;
    --entropia-color-brand-accent: #E2E8F0;
    --entropia-color-ink: #E5EEF9;
    --entropia-color-ink-muted: #A9B7CA;
    --entropia-color-ink-soft: #7F90A8;
    --entropia-color-surface: #111827;
    --entropia-color-surface-raised: #172132;
    --entropia-color-line: #243244;

    --entropia-status-neutral-fg: #A9B7CA;
    --entropia-status-neutral-bg: #111B2A;
    --entropia-status-neutral-border: #243244;
    --entropia-status-info-fg: #93C5FD;
    --entropia-status-info-bg: #0E223F;
    --entropia-status-info-border: #1D4ED8;
    --entropia-status-success-fg: #86EFAC;
    --entropia-status-success-bg: #0F2217;
    --entropia-status-success-border: #166534;
    --entropia-status-pending-fg: #5EEAD4;
    --entropia-status-pending-bg: #10242A;
    --entropia-status-pending-border: #0F766E;
    --entropia-status-warning-fg: #FCD34D;
    --entropia-status-warning-bg: #2A1B05;
    --entropia-status-warning-border: #B45309;
    --entropia-status-danger-fg: #FCA5A5;
    --entropia-status-danger-bg: #311313;
    --entropia-status-danger-border: #B91C1C;
    --entropia-status-blocked-fg: #C7D2FE;
    --entropia-status-blocked-bg: #172554;
    --entropia-status-blocked-border: #4F46E5;
  }
}

:root[data-theme="dark"] {
  --entropia-color-brand-primary: #60A5FA;
  --entropia-color-brand-primary-strong: #93C5FD;
  --entropia-color-brand-action: #2563EB;
  --entropia-color-on-brand: #FFFFFF;
  --entropia-color-brand-accent: #E2E8F0;
  --entropia-color-ink: #E5EEF9;
  --entropia-color-ink-muted: #A9B7CA;
  --entropia-color-ink-soft: #7F90A8;
  --entropia-color-surface: #111827;
  --entropia-color-surface-raised: #172132;
  --entropia-color-line: #243244;

  --entropia-status-neutral-fg: #A9B7CA;
  --entropia-status-neutral-bg: #111B2A;
  --entropia-status-neutral-border: #243244;
  --entropia-status-info-fg: #93C5FD;
  --entropia-status-info-bg: #0E223F;
  --entropia-status-info-border: #1D4ED8;
  --entropia-status-success-fg: #86EFAC;
  --entropia-status-success-bg: #0F2217;
  --entropia-status-success-border: #166534;
  --entropia-status-pending-fg: #5EEAD4;
  --entropia-status-pending-bg: #10242A;
  --entropia-status-pending-border: #0F766E;
  --entropia-status-warning-fg: #FCD34D;
  --entropia-status-warning-bg: #2A1B05;
  --entropia-status-warning-border: #B45309;
  --entropia-status-danger-fg: #FCA5A5;
  --entropia-status-danger-bg: #311313;
  --entropia-status-danger-border: #B91C1C;
  --entropia-status-blocked-fg: #C7D2FE;
  --entropia-status-blocked-bg: #172554;
  --entropia-status-blocked-border: #4F46E5;
}

/* Status utilities. Use these instead of ad-hoc bg-warning / bg-info badges. */
.tone-neutral {
  color: var(--entropia-status-neutral-fg);
  background: var(--entropia-status-neutral-bg);
  border-color: var(--entropia-status-neutral-border);
}
.tone-info {
  color: var(--entropia-status-info-fg);
  background: var(--entropia-status-info-bg);
  border-color: var(--entropia-status-info-border);
}
.tone-success {
  color: var(--entropia-status-success-fg);
  background: var(--entropia-status-success-bg);
  border-color: var(--entropia-status-success-border);
}
.tone-pending {
  color: var(--entropia-status-pending-fg);
  background: var(--entropia-status-pending-bg);
  border-color: var(--entropia-status-pending-border);
}
.tone-warning {
  color: var(--entropia-status-warning-fg);
  background: var(--entropia-status-warning-bg);
  border-color: var(--entropia-status-warning-border);
}
.tone-danger {
  color: var(--entropia-status-danger-fg);
  background: var(--entropia-status-danger-bg);
  border-color: var(--entropia-status-danger-border);
}
.tone-blocked {
  color: var(--entropia-status-blocked-fg);
  background: var(--entropia-status-blocked-bg);
  border-color: var(--entropia-status-blocked-border);
}

/*
 * UX-14: non-colour indicators on every status tone. About 8% of men have
 * some form of colour-vision deficiency; colour alone is not a signal. Each
 * tone class also gets a leading glyph that reads identically to the colour,
 * and a 1px border in the same hue so the chip is still legible when printed
 * or rendered monochrome.
 *
 * The data-tone attribute on the chip (or any element) overrides the icon
 * glyph when a more specific label is needed (e.g. an explicit "✕" for
 * "Failed" instead of the generic danger "!").
 */
.tone-neutral,
.tone-info,
.tone-success,
.tone-pending,
.tone-warning,
.tone-danger,
.tone-blocked {
    font-weight: 700;
    border-width: 1.5px;
}

.tone-neutral::before  { content: "• "; }
.tone-info::before     { content: "ℹ "; }
.tone-success::before  { content: "✓ "; }
.tone-pending::before  { content: "◷ "; }
.tone-warning::before  { content: "⚠ "; }
.tone-danger::before   { content: "✕ "; }
.tone-blocked::before  { content: "■ "; }