/* SALES OS VENDOR (F1, 2026-10-08): masolat -- forras: supply-os/css/tokens.css @ 94643426, blob 91c5ee50e341716627d496c77bb9b495d7fab5e8. A Sales OS a /sales/vendor/ alol tolti,
   a Supply OS /css/ utvonala a Supply-e marad. Frissites: ujra-masolas + a blob-azonosito cserje (sales-os/tests/boundary.test.ts meri). */
/* Aura Supply OS — Design Tokens v1.0 */
/* RENDSZERSZIN (Peter, 2026-10-08): a Supply OS kiemelo szine KEK -- az OS-kozpont (:3424) Supply OS ikon-gradiense
   #4C8DF0 -> #1340B8 (docs/OS-RENDSZEREK.md). Elotte narancs (#E8390E / sotet #FF5A2B) volt. */
/* Source: docs/aura-supply-os/design/01-design-system.md */

:root {
  /* A bongeszo SAJAT vezerloi (gorgetosav, legordulo panel, autofill, datum-valaszto)
     ebbol tudjak, milyen alapon rajzoljanak. Enelkul vilagos widgeteket rajzol sotet lapra. */
  color-scheme: light;

  /* Brand / interactive */
  --color-primary:        #2459D6;
  --color-primary-hover:  #1C4CBF;
  --color-primary-active: #1340B8;
  --color-primary-subtle: #E6EFFC;
  --color-accent:         #4C8DF0;

  /* Surfaces */
  --color-bg:             #FAF9F8;
  --color-surface:        #FFFFFF;
  --color-surface-2:      #F4F2F0;
  --color-surface-3:      #ECE9E6;

  /* Borders */
  --color-border:         #E2DEDA;
  --color-border-strong:  #C9C3BE;

  /* Text */
  --color-text:           #232019;
  --color-text-secondary: #6B6460;
  --color-text-muted:     #736C66;  /* WCAG AA: 4.63 surface-2-n (volt #9B948E = 2.68) */
  --color-text-inverse:   #FFFFFF;

  /* Semantic status */
  --color-success:        #1E7F3C;
  --color-success-bg:     #E7F4EB;
  --color-warning:        #B26A00;
  --color-warning-bg:     #FCF3E1;
  --color-danger:         #B3261E;
  --color-danger-bg:      #F9E9E8;
  --color-info:           #175CD3;
  --color-info-bg:        #E8F0FC;

  /* AI layer */
  --color-ai:             #6D28D9;
  --color-ai-bg:          #F1EBFC;
  --color-ai-border:      #D6C7F5;

  /* Typography */
  --font-ui:   'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Type scale */
  --text-xs:   11px;   --lh-xs:   16px;
  --text-sm:   12.5px; --lh-sm:   18px;
  --text-base: 14px;   --lh-base: 20px;
  --text-md:   16px;   --lh-md:   24px;
  --text-lg:   20px;   --lh-lg:   28px;
  --text-xl:   25px;   --lh-xl:   32px;
  --text-kpi:  31px;   --lh-kpi:  36px;
  --text-kpi-lg: 39px; --lh-kpi-lg: 44px;

  /* Spacing (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(30,26,24,.06);
  --shadow-2: 0 4px 12px rgba(30,26,24,.10);
  --shadow-3: 0 12px 32px rgba(30,26,24,.16);

  /* Layout */
  --nav-width-open: 240px;
  --nav-width-icon: 56px;
  --topbar-height:  56px;
  --ai-panel-width: 320px;
  --ai-tab-width:   40px;
  --content-max:    1680px;
  --content-pad-xl: 24px;
  --content-pad-md: 20px;
  --content-pad-sm: 16px;
  --content-pad-xs: 12px;

  /* Row heights */
  --row-compact:    36px;
  --row-comfortable: 44px;
  --row-scanner:    56px;

  /* Motion */
  --motion-fast: 120ms ease-out;
  --motion-base: 200ms ease-out;

  /* Breakpoints (reference — used in JS) */
  --bp-mobile-s: 480px;
  --bp-mobile:   768px;
  --bp-tablet:   1024px;
  --bp-desktop:  1200px;
  --bp-desktop-xl: 1440px;
}

/* Dark theme */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary:        #4C8DF0;
  --color-primary-hover:  #6AA1F3;
  --color-primary-active: #2F72E0;
  --color-primary-subtle: #122240;
  --color-accent:         #4C8DF0;

  --color-bg:             #171412;
  --color-surface:        #211D1A;
  --color-surface-2:      #2A2521;
  --color-surface-3:      #353029;

  --color-border:         #3A342F;
  --color-border-strong:  #524B44;

  --color-text:           #F2EDE8;
  --color-text-secondary: #B5AEA7;
  --color-text-muted:     #A39B93;  /* WCAG AA: 5.54 surface-2-n (volt #7D766F = 3.39) */
  --color-text-inverse:   #232019;

  --color-success:        #4CC271; --color-success-bg: #12291A;
  --color-warning:        #E8A33D; --color-warning-bg: #2E2211;
  --color-danger:         #F26D65; --color-danger-bg:  #331512;
  --color-info:           #6BA3F5; --color-info-bg:    #14213A;

  --color-ai:             #A78BFA; --color-ai-bg: #241A3A; --color-ai-border: #3D2E5C;

  --shadow-1: 0 1px 2px rgba(0,0,0,.20);
  --shadow-2: 0 4px 12px rgba(0,0,0,.32);
  --shadow-3: 0 12px 32px rgba(0,0,0,.48);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-primary:        #4C8DF0;
    --color-primary-hover:  #6AA1F3;
    --color-primary-active: #2F72E0;
    --color-primary-subtle: #122240;
    --color-accent:         #4C8DF0;
    --color-bg:             #171412;
    --color-surface:        #211D1A;
    --color-surface-2:      #2A2521;
    --color-surface-3:      #353029;
    --color-border:         #3A342F;
    --color-border-strong:  #524B44;
    --color-text:           #F2EDE8;
    --color-text-secondary: #B5AEA7;
    --color-text-muted:     #A39B93;  /* WCAG AA: 5.54 surface-2-n (volt #7D766F = 3.39) */
    --color-text-inverse:   #232019;
    --color-success:        #4CC271; --color-success-bg: #12291A;
    --color-warning:        #E8A33D; --color-warning-bg: #2E2211;
    --color-danger:         #F26D65; --color-danger-bg:  #331512;
    --color-info:           #6BA3F5; --color-info-bg:    #14213A;
    --color-ai:             #A78BFA; --color-ai-bg: #241A3A; --color-ai-border: #3D2E5C;
    --shadow-1: 0 1px 2px rgba(0,0,0,.20);
    --shadow-2: 0 4px 12px rgba(0,0,0,.32);
    --shadow-3: 0 12px 32px rgba(0,0,0,.48);
  }
}

/* Forced dark (scanner views) */
.dark-forced {
  color-scheme: dark;
  --color-primary:        #4C8DF0 !important;
  --color-primary-hover:  #6AA1F3 !important;
  --color-primary-active: #2F72E0 !important;
  --color-primary-subtle: #122240 !important;
  --color-bg:             #171412 !important;
  --color-surface:        #211D1A !important;
  --color-surface-2:      #2A2521 !important;
  --color-surface-3:      #353029 !important;
  --color-border:         #3A342F !important;
  --color-border-strong:  #524B44 !important;
  --color-text:           #F2EDE8 !important;
  --color-text-secondary: #B5AEA7 !important;
  --color-text-muted:     #A39B93 !important;
  --color-success:        #4CC271 !important; --color-success-bg: #12291A !important;
  --color-warning:        #E8A33D !important; --color-warning-bg: #2E2211 !important;
  --color-danger:         #F26D65 !important; --color-danger-bg:  #331512 !important;
  --color-ai:             #A78BFA !important; --color-ai-bg: #241A3A !important; --color-ai-border: #3D2E5C !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}