/*
 * Lightworker design tokens and base styles.
 *
 * Values reproduce the approved reference in docs/ui/lightworker-ui-reference.html. Propshaft
 * links every file in this directory; the explicit layer order below makes the cascade
 * independent of file load order: tokens < base < shell < components < utilities.
 */

@layer tokens, base, shell, components, utilities;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Brand: the red "Latarnik" on a white field (public/icon.svg). */
    --lw-brand: #dc143c;
    --lw-brand-field: #ffffff;

    /* Surfaces and text */
    --lw-bg: light-dark(#f3f2ee, #0d0f0e);
    --lw-panel: light-dark(#ffffff, #151816);
    --lw-panel-2: light-dark(#f8f8f5, #1b1f1c);
    --lw-ink: light-dark(#171a18, #f3f5f2);
    --lw-muted: light-dark(#667068, #9da7a0);
    --lw-line: light-dark(#dce0db, #2c332e);
    --lw-soft-line: light-dark(#e9ece8, #232924);
    /* Boundary of a control state; at least 3:1 against --lw-panel and --lw-panel-2 (WCAG 1.4.11). */
    --lw-line-strong: light-dark(#7d877f, #7b857e);
    --lw-accent: #2f6feb;
    --lw-accent-ink: #ffffff;
    --lw-shadow: 0 1px 2px light-dark(rgb(16 24 40 / 4%), rgb(0 0 0 / 24%));
    --lw-shadow-overlay: 0 12px 32px light-dark(rgb(19 29 22 / 13%), rgb(0 0 0 / 40%));

    /* Sidebar: dark in both color schemes, as in the reference. */
    --lw-sidebar-bg: light-dark(#161a17, #090b0a);
    --lw-sidebar-ink: #f4f6f2;
    --lw-sidebar-ink-strong: #ffffff;
    --lw-sidebar-muted: #aeb6b0;
    --lw-sidebar-meta: #8b958e;
    --lw-sidebar-label: #7c867f;
    --lw-sidebar-hover: rgb(255 255 255 / 5.5%);
    --lw-sidebar-current: #282f2a;
    --lw-avatar-ink: var(--lw-sidebar-ink);
    --lw-avatar-bg: #252b27;

    /* Status tones. Text on a tone background meets WCAG AA in both schemes. */
    --lw-critical: light-dark(#b42318, #ff766b);
    --lw-critical-bg: light-dark(#fff0ed, #321815);
    --lw-warning: light-dark(#9a6700, #ffc44f);
    --lw-warning-bg: light-dark(#fff7df, #2c2412);
    --lw-ok: light-dark(#16734a, #58d394);
    --lw-ok-bg: light-dark(#eaf8ef, #122a1f);
    --lw-info: light-dark(#1c5db6, #75aeff);
    --lw-info-bg: light-dark(#edf5ff, #14233a);
    --lw-unknown: light-dark(#69716b, #a6ada8);

    /* Focus */
    /* The accent alone is 2.3:1 on dark surfaces; the dark ring keeps 3:1 (WCAG 1.4.11). */
    --lw-focus: light-dark(var(--lw-accent), #75aeff);
    --lw-focus-width: 2px;
    --lw-focus-offset: 2px;

    /* Typography */
    --lw-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --lw-text-3xs: 9px;
    --lw-text-2xs: 10px;
    --lw-text-xs: 11px;
    --lw-text-sm: 12px;
    --lw-text-md: 13px;
    --lw-text-base: 14px;
    --lw-text-lg: 16px;
    --lw-text-xl: 17px;
    --lw-text-2xl: 27px;
    --lw-weight-normal: 430;
    --lw-weight-medium: 500;
    --lw-weight-semibold: 650;
    --lw-weight-bold: 700;
    --lw-leading-tight: 1.15;
    --lw-leading-snug: 1.35;
    --lw-leading-normal: 1.55;

    /* Spacing */
    --lw-space-1: 4px;
    --lw-space-2: 8px;
    --lw-space-3: 12px;
    --lw-space-4: 16px;
    --lw-space-5: 20px;
    --lw-space-6: 24px;
    --lw-space-7: 28px;
    --lw-gap: 20px;
    --lw-touch-target: 44px;

    /* Shape */
    --lw-border-width: 1px;
    --lw-radius: 16px;
    --lw-radius-window: 20px;
    --lw-radius-md: 10px;
    --lw-radius-sm: 9px;
    --lw-radius-full: 999px;
  }

  /*
   * Effective theme (docs/ui/README.md#motywy-light-dark-i-system). Every token that differs by
   * scheme is a light-dark() pair, so pinning color-scheme is the whole theme switch: no duplicated
   * component values, and native controls follow too. lightworker_theme.js always sets data-theme,
   * also for the "system" preference, so every switch goes through one transition-free flush.
   * Without JavaScript the attribute is absent and "light dark" follows prefers-color-scheme.
   */
  :root[data-theme="light"] {
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
  }

  /* Set by lightworker_theme.js for the single style flush of a theme change. */
  :root[data-theme-switching] *,
  :root[data-theme-switching] *::before,
  :root[data-theme-switching] *::after {
    transition: none !important;
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    background: var(--lw-bg);
  }

  body {
    margin: 0;
    color: var(--lw-ink);
    background: var(--lw-bg);
    font-family: var(--lw-font-sans);
    font-size: var(--lw-text-base);
    font-weight: var(--lw-weight-normal);
    line-height: 1.5;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  h1,
  h2,
  h3,
  p {
    margin-top: 0;
  }

  a {
    color: inherit;
  }

  ::placeholder {
    color: var(--lw-muted);
    opacity: 1;
  }

  :where(a, button, summary, select, input, textarea, [tabindex]):focus-visible {
    outline: var(--lw-focus-width) solid var(--lw-focus);
    outline-offset: var(--lw-focus-offset);
  }

  :where([tabindex="-1"]):focus:not(:focus-visible) {
    outline: none;
  }
}

@layer utilities {
  .lw-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .lw-break {
    overflow-wrap: anywhere;
  }
}