/*
  eFacto ONE design tokens (from the eFacto Console / Unified UI design).
  Every colour, size, radius, shadow and layer used by ef- components comes from a --ef-* custom
  property here. Components never hard-code colours.

  Theme: light by default; dark when an element (usually the app root) has data-ef-theme="dark",
  or when the OS prefers dark and the app has not forced data-ef-theme="light".
*/

:root,
[data-ef-theme="light"] {
  color-scheme: light;

  /* Brand and surfaces */
  --ef-color-primary: #2c5ed3;
  --ef-color-primary-hover: #2250bb;
  --ef-color-on-primary: #ffffff;
  --ef-color-link: #2455bf;
  --ef-color-bg: #f4f7fc;
  --ef-color-surface: #ffffff;
  --ef-color-surface-muted: #f8f9fc;
  --ef-color-tint: #eaf0ff;
  --ef-color-tint-strong: #dce7ff;
  --ef-color-tint-border: #cbdafc;
  --ef-color-selected: #edf2ff;
  --ef-color-border: #e1e8f1;
  --ef-color-border-strong: #c9d4e3;
  --ef-color-text: #182943;
  --ef-color-text-muted: #62738a;
  --ef-color-text-subtle: #8a98ab;
  --ef-color-rail: #162d50;
  --ef-color-rail-text: #e8f0ff;
  --ef-color-backdrop: #0c1b3380;

  /* Status: text / background pairs (badges, alerts, stat cards) */
  --ef-color-success: #11795b;
  --ef-color-success-bg: #e7f7ef;
  --ef-color-warning: #a66c15;
  --ef-color-warning-bg: #fff2df;
  --ef-color-danger: #b13f50;
  --ef-color-danger-bg: #ffe9ed;
  --ef-color-info: #2869be;
  --ef-color-info-bg: #eaf1ff;
  --ef-color-accent: #5b4bdd;
  --ef-color-accent-bg: #f0edff;
  --ef-color-neutral: #5d6b80;
  --ef-color-neutral-bg: #eef1f6;
  --ef-color-modified: #ba842c;

  /* Focus */
  --ef-focus-color: #fb9c38;
  --ef-focus-ring: 0 0 0 2px var(--ef-focus-color);

  /* Typography */
  --ef-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ef-font-family-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --ef-font-size-xs: 10px;
  --ef-font-size-sm: 11px;
  --ef-font-size-md: 12px;
  --ef-font-size-base: 13px;
  --ef-font-size-lg: 14px;
  --ef-font-size-xl: 18px;
  --ef-font-size-2xl: 24px;
  --ef-font-weight-normal: 500;
  --ef-font-weight-medium: 650;
  --ef-font-weight-bold: 750;
  --ef-font-weight-heavy: 850;

  /* Spacing (4 px steps) */
  --ef-space-1: 4px;
  --ef-space-2: 8px;
  --ef-space-3: 12px;
  --ef-space-4: 16px;
  --ef-space-5: 20px;
  --ef-space-6: 24px;
  --ef-space-8: 32px;

  /* Control sizes */
  --ef-control-height-sm: 30px;
  --ef-control-height-md: 36px;
  --ef-control-height-lg: 44px;

  /* Shape */
  --ef-radius-xs: 4px;
  --ef-radius-sm: 6px;
  --ef-radius-md: 8px;
  --ef-radius-lg: 10px;
  --ef-radius-xl: 14px;
  --ef-radius-pill: 999px;

  /* Elevation */
  --ef-shadow-sm: 0 1px 3px #1a345908;
  --ef-shadow-md: 0 18px 52px #15243e25;
  --ef-shadow-lg: 0 25px 70px #071b4033;
  --ef-shadow-drawer: -12px 0 40px #142c4850;
  --ef-shadow-toast: 0 12px 25px #00000033;

  /* Layers (one scale for the whole app) */
  --ef-z-sticky: 2;
  --ef-z-dropdown: 50;
  --ef-z-drawer: 300;
  --ef-z-modal: 320;
  --ef-z-toast: 400;

  /* Motion */
  --ef-transition: 120ms ease-in-out;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-ef-theme="light"]) {
    color-scheme: dark;
    --ef-color-primary: #4d7fe8;
    --ef-color-primary-hover: #6b95ef;
    --ef-color-on-primary: #ffffff;
    --ef-color-link: #acc6ff;
    --ef-color-bg: #111b2b;
    --ef-color-surface: #1c293d;
    --ef-color-surface-muted: #182437;
    --ef-color-tint: #2d4166;
    --ef-color-tint-strong: #344f7e;
    --ef-color-tint-border: #445d89;
    --ef-color-selected: #2d3f63;
    --ef-color-border: #394b67;
    --ef-color-border-strong: #4a5f80;
    --ef-color-text: #f0f4ff;
    --ef-color-text-muted: #b2bfd5;
    --ef-color-text-subtle: #8796ad;
    --ef-color-rail: #0b1629;
    --ef-color-rail-text: #e6efff;
    --ef-color-backdrop: #050c18b0;
    --ef-color-success: #87e0c2;
    --ef-color-success-bg: #21443a;
    --ef-color-warning: #f8ca7c;
    --ef-color-warning-bg: #4d3823;
    --ef-color-danger: #ffa4b5;
    --ef-color-danger-bg: #4a2837;
    --ef-color-info: #9cc0ff;
    --ef-color-info-bg: #26385a;
    --ef-color-accent: #c2b9ff;
    --ef-color-accent-bg: #332f50;
    --ef-color-neutral: #c6d0de;
    --ef-color-neutral-bg: #2a3a52;
    --ef-color-modified: #efbb77;
    --ef-shadow-sm: 0 1px 3px #00000040;
    --ef-shadow-md: 0 18px 52px #00000080;
    --ef-shadow-lg: 0 25px 70px #00000099;
    --ef-shadow-drawer: -12px 0 40px #00000080;
  }
}

[data-ef-theme="dark"] {
  color-scheme: dark;
  --ef-color-primary: #4d7fe8;
  --ef-color-primary-hover: #6b95ef;
  --ef-color-on-primary: #ffffff;
  --ef-color-link: #acc6ff;
  --ef-color-bg: #111b2b;
  --ef-color-surface: #1c293d;
  --ef-color-surface-muted: #182437;
  --ef-color-tint: #2d4166;
  --ef-color-tint-strong: #344f7e;
  --ef-color-tint-border: #445d89;
  --ef-color-selected: #2d3f63;
  --ef-color-border: #394b67;
  --ef-color-border-strong: #4a5f80;
  --ef-color-text: #f0f4ff;
  --ef-color-text-muted: #b2bfd5;
  --ef-color-text-subtle: #8796ad;
  --ef-color-rail: #0b1629;
  --ef-color-rail-text: #e6efff;
  --ef-color-backdrop: #050c18b0;
  --ef-color-success: #87e0c2;
  --ef-color-success-bg: #21443a;
  --ef-color-warning: #f8ca7c;
  --ef-color-warning-bg: #4d3823;
  --ef-color-danger: #ffa4b5;
  --ef-color-danger-bg: #4a2837;
  --ef-color-info: #9cc0ff;
  --ef-color-info-bg: #26385a;
  --ef-color-accent: #c2b9ff;
  --ef-color-accent-bg: #332f50;
  --ef-color-neutral: #c6d0de;
  --ef-color-neutral-bg: #2a3a52;
  --ef-color-modified: #efbb77;
  --ef-shadow-sm: 0 1px 3px #00000040;
  --ef-shadow-md: 0 18px 52px #00000080;
  --ef-shadow-lg: 0 25px 70px #00000099;
  --ef-shadow-drawer: -12px 0 40px #00000080;
}

/* Shared helpers used by several components */
.ef-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes ef-spin {
  to { transform: rotate(360deg); }
}

@keyframes ef-slide-in-right {
  from { transform: translateX(40px); opacity: .6; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes ef-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}