@property --ivl-intent-urgency {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.35;
}

@property --ivl-intent-risk {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.25;
}

@property --ivl-intent-density {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.4;
}

@property --ivl-intent-confidence {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.7;
}

@property --ivl-intent-actionability {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.6;
}

:root {
  --ivl-material-mode: light;
  --ivl-intent-urgency: 0.35;
  --ivl-intent-risk: 0.25;
  --ivl-intent-density: 0.4;
  --ivl-intent-confidence: 0.7;
  --ivl-intent-actionability: 0.6;

  --ivl-surface-contrast: calc(
    0.3 + (var(--ivl-intent-risk) * 0.35) + (var(--ivl-intent-urgency) * 0.2)
  );
  --ivl-surface-softness: calc(
    1 - (var(--ivl-intent-density) * 0.45) - (var(--ivl-intent-urgency) * 0.15)
  );
  --ivl-surface-depth: calc(
    0.2 + (var(--ivl-intent-risk) * 0.4) + (var(--ivl-intent-density) * 0.2)
  );
  --ivl-focus-ring: calc(
    0.2 + (var(--ivl-intent-actionability) * 0.5) + (var(--ivl-intent-confidence) * 0.2)
  );
  --ivl-accent-saturation: calc(
    0.4 + (var(--ivl-intent-actionability) * 0.4) + (var(--ivl-intent-confidence) * 0.2)
  );
  --ivl-motion-allowance: calc(
    1 - (var(--ivl-intent-urgency) * 0.55) - (var(--ivl-intent-risk) * 0.2)
  );

  --ivl-surface-hue: 222;
  --ivl-surface-lightness: calc(96% - (var(--ivl-surface-contrast) * 20%));
  --ivl-bg-0: hsl(
    var(--ivl-surface-hue)
    24%
    var(--ivl-surface-lightness)
  );
  --ivl-bg-1: hsl(
    var(--ivl-surface-hue)
    30%
    calc(var(--ivl-surface-lightness) - (4% + (var(--ivl-surface-depth) * 4%)))
  );
  --ivl-fg-0: hsl(
    var(--ivl-surface-hue)
    22%
    calc(12% + (var(--ivl-surface-contrast) * 18%))
  );
  --ivl-fg-1: hsl(
    var(--ivl-surface-hue)
    14%
    calc(26% + (var(--ivl-surface-softness) * 18%))
  );
  --ivl-border-subtle: hsl(
    var(--ivl-surface-hue)
    18%
    calc(82% - (var(--ivl-surface-contrast) * 18%))
  );
  --ivl-accent-hue: 275;
  --ivl-accent-0: hsl(
    var(--ivl-accent-hue)
    calc(26% + (var(--ivl-accent-saturation) * 36%))
    calc(88% - (var(--ivl-intent-risk) * 12%))
  );
  --ivl-accent-1: hsl(
    var(--ivl-accent-hue)
    calc(32% + (var(--ivl-accent-saturation) * 42%))
    calc(48% + (var(--ivl-intent-actionability) * 8%))
  );
  --ivl-ok: hsl(150 42% 46%);
  --ivl-warn: hsl(35 70% 48%);
  --ivl-bad: hsl(4 62% 50%);

  --ivl-surface-base: var(--ivl-bg-0);
  --ivl-surface-raised: var(--ivl-bg-1);
  --ivl-text-primary: var(--ivl-fg-0);
  --ivl-text-muted: var(--ivl-fg-1);
  --ivl-accent-color: var(--ivl-accent-1);
  --ivl-accent-soft: var(--ivl-accent-0);

  --ivl-lens-clarity-level: calc(0.2 + (var(--ivl-intent-confidence) * 0.6));
  --ivl-lens-overload-level: calc(0.2 + (var(--ivl-intent-density) * 0.6));
  --ivl-lens-mismatch-level: calc(0.2 + (var(--ivl-intent-risk) * 0.6));
  --ivl-lens-clarity-opacity: calc(0.18 + (var(--ivl-lens-clarity-level) * 0.45));
  --ivl-lens-overload-opacity: calc(0.14 + (var(--ivl-lens-overload-level) * 0.45));
  --ivl-lens-mismatch-opacity: calc(0.12 + (var(--ivl-lens-mismatch-level) * 0.45));
  --ivl-lens-clarity-blur: calc(2px + (var(--ivl-lens-clarity-level) * 6px));
  --ivl-lens-overload-blur: calc(2px + (var(--ivl-lens-overload-level) * 6px));
  --ivl-lens-mismatch-blur: calc(2px + (var(--ivl-lens-mismatch-level) * 6px));
  --ivl-lens-clarity-stroke: calc(1px + (var(--ivl-lens-clarity-level) * 2px));
  --ivl-lens-overload-stroke: calc(1px + (var(--ivl-lens-overload-level) * 2px));
  --ivl-lens-mismatch-stroke: calc(1px + (var(--ivl-lens-mismatch-level) * 2px));
  --ivl-lens-field-opacity: calc(0.8 + (var(--ivl-surface-depth) * 0.2));
  --ivl-lens-grid-opacity: calc(0.2 + (var(--ivl-surface-softness) * 0.3));
  --ivl-lens-layer-opacity-scale: calc(0.7 + (var(--ivl-surface-depth) * 0.3));
  --ivl-field-mask-outer: calc(0.5 + (var(--ivl-surface-softness) * 0.35));
  --ivl-field-mask-inner: calc(0.35 + (var(--ivl-surface-depth) * 0.3));
  --ivl-field-mask-core: calc(0.2 + (var(--ivl-surface-depth) * 0.2));
  --ivl-lens-clarity-color: var(--ivl-ok);
  --ivl-lens-overload-color: var(--ivl-warn);
  --ivl-lens-mismatch-color: var(--ivl-bad);

  --ivl-svg-stroke-width: calc(1px + (var(--ivl-intent-urgency) * 1.5px));
  --ivl-svg-opacity: calc(0.6 + (var(--ivl-intent-confidence) * 0.4));
  --ivl-svg-accent: var(--ivl-accent-color);
}

:root[data-material-mode="dark"],
body[data-material-mode="dark"] {
  --ivl-material-mode: dark;
  --ivl-surface-contrast: calc(
    0.4 + (var(--ivl-intent-risk) * 0.35) + (var(--ivl-intent-urgency) * 0.25)
  );
  --ivl-surface-softness: calc(
    0.7 - (var(--ivl-intent-density) * 0.3) - (var(--ivl-intent-urgency) * 0.2)
  );
  --ivl-surface-depth: calc(
    0.35 + (var(--ivl-intent-risk) * 0.35) + (var(--ivl-intent-density) * 0.2)
  );
  --ivl-focus-ring: calc(
    0.25 + (var(--ivl-intent-actionability) * 0.45) + (var(--ivl-intent-confidence) * 0.15)
  );
  --ivl-accent-saturation: calc(
    0.25 + (var(--ivl-intent-actionability) * 0.25) + (var(--ivl-intent-confidence) * 0.15)
  );
  --ivl-motion-allowance: calc(
    0.75 - (var(--ivl-intent-urgency) * 0.4) - (var(--ivl-intent-risk) * 0.15)
  );

  --ivl-bg-0: hsl(225 18% 10%);
  --ivl-bg-1: hsl(225 18% 6%);
  --ivl-fg-0: hsl(220 20% 92%);
  --ivl-fg-1: hsl(220 10% 70%);
  --ivl-border-subtle: hsl(220 12% 26%);
  --ivl-accent-hue: 268;
  --ivl-accent-0: hsl(
    var(--ivl-accent-hue)
    calc(18% + (var(--ivl-accent-saturation) * 24%))
    calc(36% + (var(--ivl-intent-actionability) * 6%))
  );
  --ivl-accent-1: hsl(
    var(--ivl-accent-hue)
    calc(22% + (var(--ivl-accent-saturation) * 30%))
    calc(58% + (var(--ivl-intent-actionability) * 4%))
  );
  --ivl-ok: hsl(150 32% 44%);
  --ivl-warn: hsl(35 54% 46%);
  --ivl-bad: hsl(4 46% 48%);
  --ivl-lens-clarity-blur: calc(1px + (var(--ivl-lens-clarity-level) * 3px));
  --ivl-lens-overload-blur: calc(1px + (var(--ivl-lens-overload-level) * 3px));
  --ivl-lens-mismatch-blur: calc(1px + (var(--ivl-lens-mismatch-level) * 3px));
  --ivl-lens-clarity-stroke: calc(1.5px + (var(--ivl-lens-clarity-level) * 2.5px));
  --ivl-lens-overload-stroke: calc(1.5px + (var(--ivl-lens-overload-level) * 2.5px));
  --ivl-lens-mismatch-stroke: calc(1.5px + (var(--ivl-lens-mismatch-level) * 2.5px));
  --ivl-lens-field-opacity: calc(0.6 + (var(--ivl-surface-depth) * 0.2));
  --ivl-lens-grid-opacity: calc(0.12 + (var(--ivl-surface-softness) * 0.2));
  --ivl-lens-layer-opacity-scale: calc(0.6 + (var(--ivl-surface-depth) * 0.25));
}

[data-intent-urgency] {
  --ivl-intent-urgency: clamp(0, attr(data-intent-urgency number), 1);
}

[data-intent-risk] {
  --ivl-intent-risk: clamp(0, attr(data-intent-risk number), 1);
}

[data-intent-density] {
  --ivl-intent-density: clamp(0, attr(data-intent-density number), 1);
}

[data-intent-confidence] {
  --ivl-intent-confidence: clamp(0, attr(data-intent-confidence number), 1);
}

[data-intent-actionability] {
  --ivl-intent-actionability: clamp(0, attr(data-intent-actionability number), 1);
}

[data-lens-clarity] {
  --ivl-lens-clarity-level: clamp(0, attr(data-lens-clarity number), 1);
  --ivl-lens-clarity-opacity: calc(0.12 + (var(--ivl-lens-clarity-level) * 0.6));
}

[data-lens-overload] {
  --ivl-lens-overload-level: clamp(0, attr(data-lens-overload number), 1);
  --ivl-lens-overload-opacity: calc(0.12 + (var(--ivl-lens-overload-level) * 0.6));
}

[data-lens-mismatch] {
  --ivl-lens-mismatch-level: clamp(0, attr(data-lens-mismatch number), 1);
  --ivl-lens-mismatch-opacity: calc(0.12 + (var(--ivl-lens-mismatch-level) * 0.6));
}