/* Integrator Allegro — colour tokens.
   Base values lifted verbatim from web/src/styles.css (light + dark theme).
   Semantic aliases below map roles onto those base values; prefer the aliases
   in new code so a palette change lands in one place. */
:root {
  /* Base — light theme (default) */
  --bg: #ebedf0;
  --panel: #ffffff;
  --panel-alt: #f5f6f8;
  --text: #17181c;
  --muted: #6a6f7a;
  --border: #e4e6ea;
  --border-strong: #d3d6dc;

  --orange: #ff5a00;
  --orange-dark: #e35000;
  --teal: #00887a;
  --green: #178b34;
  --yellow: #d98600;
  --red: #d81f0a;

  --accent: var(--orange);
  --accent-strong: var(--orange-dark); /* hover on a primary button */
  --on-accent: #ffffff;

  /* Semantic — surfaces */
  --surface-page: var(--bg);
  --surface-card: var(--panel);
  --surface-sunken: var(--panel-alt);
  --surface-accent-soft: color-mix(in srgb, var(--orange) 10%, transparent);
  --surface-platform-soft: color-mix(in srgb, var(--teal) 10%, transparent);

  /* Semantic — ink */
  --text-body: var(--text);
  --text-muted: var(--muted);
  --text-faint: color-mix(in srgb, var(--muted) 75%, var(--panel));
  --text-link: var(--teal);
  --text-on-accent: var(--on-accent);
  --text-on-warn: #17181c; /* dark ink on a solid yellow fill; yellow stays light enough in the dark theme */
  --text-desc: #4c5159; /* the paragraph under a page title; darker than muted, lighter than body */

  /* Semantic — lines */
  --line: var(--border);
  --line-strong: var(--border-strong);
  --line-soft: color-mix(in srgb, var(--border) 60%, var(--panel));

  /* Semantic — status (the traffic light the whole product runs on) */
  --status-ok: var(--green);
  --status-warn: var(--yellow);
  --status-error: var(--red);
  --status-platform: var(--teal);
  --status-ok-soft: color-mix(in srgb, var(--green) 12%, transparent);
  --status-warn-soft: color-mix(in srgb, var(--yellow) 14%, transparent);
  --status-error-soft: color-mix(in srgb, var(--red) 12%, transparent);
  --status-platform-soft: color-mix(in srgb, var(--teal) 14%, transparent);
  /* Status ink: the text colour on a soft status fill. The full colours above
     are fine for dots and borders but yellow on white is under 4.5:1, so text
     uses these darker inks in the light theme (the dark theme lifts them). */
  --status-ok-ink: #0f6b27;
  --status-warn-ink: #8a5600;
  --status-error-ink: #a11a0a;

  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: #0e1116;
  --panel: #171b22;
  --panel-alt: #1f242d;
  --text: #e8eaed;
  --muted: #9aa1ac;
  --border: #2a303a;
  --border-strong: #3a414d;

  --orange: #ff7a33;
  --orange-dark: #ff6a1a;
  --teal: #33bcac;
  --green: #3fb85f;
  --yellow: #e6a53a;
  --red: #f26451;

  --text-desc: #c5c9d1;
  --status-ok-ink: var(--green);
  --status-warn-ink: var(--yellow);
  --status-error-ink: var(--red);

  color-scheme: dark;
}
/* Integrator Allegro — type tokens.
   No webfont: the product deliberately renders in the OS UI face, so a page
   paints with zero font latency and looks native on Windows and macOS alike.
   Numbers that must line up (countdowns, ids, metrics) switch to mono. */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono: var(--mono);

  /* Sizes — the real scale in use, in px as authored in the views */
  --text-page-title: 26px;   /* Kokpit h1 */
  --text-h1: 1.5rem;         /* legacy .page-title views */
  --text-card-title: 15px;   /* card / section heading */
  --text-body-size: 15px;    /* body default */
  --text-row: 13.5px;        /* list rows, attention rows, event text */
  --text-nav: 14px;          /* sidebar item */
  --text-meta: 12.5px;       /* meta, tile rows, timestamps */
  --text-label: 11.5px;      /* metric label, account sub-line */
  --text-badge: 11px;        /* count badge (mono) */
  --text-eyebrow: 10.5px;    /* sidebar group title */
  --text-th: 0.72rem;        /* table head */
  --text-metric: 18px;       /* metric value (mono) */

  /* Weights */
  --weight-regular: 500;     /* the product's "normal" — body copy is 500 */
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-black: 800;       /* brand word-mark + page titles only */

  /* Line height / tracking */
  --leading-body: 1.5;
  --leading-title: 1.15;
  --tracking-title: -0.02em;
  --tracking-eyebrow: 0.14em;
  --tracking-th: 0.04em;
}
/* Integrator Allegro — spacing, radii and layout tokens. */
:root {
  /* Spacing — 2px-based, as authored (the product uses odd values on purpose:
     5px bar gaps, 9px row padding — do not snap these to a 4/8 grid). */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 18px;
  --space-9: 22px;
  --space-10: 28px;

  /* Radii */
  --radius: 12px;        /* card, panel, menu */
  --radius-sm: 8px;      /* button (global), input */
  --radius-item: 9px;    /* nav item, Kokpit button, avatar-less rows */
  --radius-row: 10px;    /* account row */
  --radius-tile: 11px;   /* sidebar sync tile */
  --radius-bar: 3px;     /* pulse bar */
  --radius-pill: 999px;  /* badge, state pill, mode pill */

  /* Layout */
  --sidebar-w: 248px;
  --drawer-w: 288px;
  --topbar-h: 52px;
  --scaffold-max: 1280px;
  --scaffold-pad: 24px 28px 36px;
  --card-pad: 18px;
  --panel-pad: 1.1rem 1.25rem;
  --breakpoint-drawer: 1023px; /* sidebar becomes a drawer at or below */
  --breakpoint-stack: 900px;   /* Kokpit two-column grid collapses */
  --breakpoint-phone: 640px;
}
/* Integrator Allegro — elevation + focus. Shadows are barely-there on light
   and deeper on dark; nothing in the product floats more than a menu. */
:root {
  --shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 2px 8px rgba(17, 24, 39, 0.05);
  --shadow-hover: 0 6px 20px rgba(17, 24, 39, 0.12);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--orange) 22%, transparent);
  --overlay: rgba(17, 24, 39, 0.45);
  --inset-accent: inset 2px 0 0 var(--orange);
  --inset-platform: inset 2px 0 0 var(--teal);
  --inset-warn: inset 3px 0 0 var(--yellow);
}

:root[data-theme='dark'] {
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);
}