@konitif/theme 0.284.2

package/src/ambient/spatialProjectionGridModel.ts

@@ -0,0 +1,276 @@
+import type { AmbientQuality } from './spatialAmbientTypes';
+import {
+  getSpatialProjectionGridPresetForPhase,
+  spatialProjectionGridPresets
+} from './spatialProjectionGridPresets';
+import type {
+  SpatialProjectionGridConfig,
+  SpatialProjectionGridGeometry,
+  SpatialProjectionGridLine,
+  SpatialProjectionGridLineKind,
+  SpatialProjectionGridNode,
+  SpatialProjectionGridResolveOptions
+} from './spatialProjectionGridTypes';
+
+const viewWidth = 1000;
+const viewHeight = 1000;
+
+type SpatialProjectionFrame = {
+  originX: number;
+  originY: number;
+  horizonX: number;
+  horizonY: number;
+  vanishingPointX: number;
+  vanishingPointY: number;
+};
+
+export function resolveSpatialProjectionGridConfig(
+  options: SpatialProjectionGridResolveOptions = {}
+): SpatialProjectionGridConfig {
+  const presetName = getSpatialProjectionGridPresetForPhase(options.phase);
+  const preset = spatialProjectionGridPresets[presetName];
+  const quality = options.quality ?? 'medium';
+  const qualityConfig = resolveQualityConfig(preset, quality);
+  const reducedMotionConfig = options.reducedMotion
+    ? { ...qualityConfig, animationSpeed: 0 }
+    : qualityConfig;
+
+  return clampGridConfig({
+    ...reducedMotionConfig,
+    ...(options.config ?? {})
+  });
+}
+
+export function createSpatialProjectionGridGeometry(
+  config: SpatialProjectionGridConfig
+): SpatialProjectionGridGeometry {
+  const frame = createProjectionFrame(config);
+
+  if (!config.enabled) {
+    return {
+      width: viewWidth,
+      height: viewHeight,
+      horizonY: frame.horizonY,
+      originX: frame.originX,
+      originY: frame.originY,
+      vanishingPointX: frame.vanishingPointX,
+      vanishingPointY: frame.vanishingPointY,
+      lines: [],
+      nodes: []
+    };
+  }
+
+  const lines: SpatialProjectionGridLine[] = [];
+  const nodes: SpatialProjectionGridNode[] = [];
+  const minorSteps = Math.max(1, Math.round(config.visibleDepth * config.minorDivisions));
+  const depthLines = minorSteps + 1;
+
+  for (let depthIndex = 0; depthIndex < depthLines; depthIndex += 1) {
+    const depthRatio = depthIndex / minorSteps;
+    const y = projectDepthY(depthRatio, config.perspectiveTilt, frame);
+    const widthFactor = projectWidthFactor(depthRatio, config.perspectiveTilt);
+    const halfWidth = config.visibleWidth * config.majorStep * widthFactor;
+    const kind = depthIndex % config.minorDivisions === 0 ? 'major' : depthIndex % 2 === 0 ? 'minor' : 'tertiary';
+    const opacity = resolveLineOpacity(kind, depthRatio, 0, config);
+
+    lines.push({
+      id: `depth-${depthIndex}`,
+      kind,
+      x1: frame.originX - halfWidth,
+      y1: y,
+      x2: frame.originX + halfWidth,
+      y2: y,
+      opacity
+    });
+  }
+
+  for (let widthIndex = -config.visibleWidth; widthIndex <= config.visibleWidth; widthIndex += 1) {
+    const lateralRatio = Math.abs(widthIndex) / Math.max(1, config.visibleWidth);
+    const kind: SpatialProjectionGridLineKind = widthIndex === 0 ? 'axis' : 'major';
+    const bottomX = frame.originX + widthIndex * config.majorStep;
+    const horizonX = frame.horizonX + widthIndex * config.majorStep * 0.05;
+
+    lines.push({
+      id: `axis-${widthIndex}`,
+      kind,
+      x1: bottomX,
+      y1: viewHeight + 80,
+      x2: horizonX,
+      y2: frame.horizonY,
+      opacity: resolveLineOpacity(kind, 0.3, lateralRatio, config)
+    });
+  }
+
+  for (let depthIndex = 0; depthIndex <= config.visibleDepth; depthIndex += 1) {
+    const depthRatio = depthIndex / Math.max(1, config.visibleDepth);
+    const y = projectDepthY(depthRatio, config.perspectiveTilt, frame);
+
+    for (let widthIndex = -config.visibleWidth; widthIndex <= config.visibleWidth; widthIndex += 2) {
+      const lateralRatio = Math.abs(widthIndex) / Math.max(1, config.visibleWidth);
+      const x = projectDepthX(widthIndex, depthRatio, config, frame);
+      const opacity = config.nodeOpacity * falloff(depthRatio, config.horizonFalloff) * falloff(lateralRatio, config.lateralFalloff);
+
+      if (opacity < 0.025) {
+        continue;
+      }
+
+      nodes.push({
+        id: `node-${depthIndex}-${widthIndex}`,
+        x,
+        y,
+        radius: widthIndex === 0 || depthIndex === 0 ? 1.6 : 0.9,
+        opacity
+      });
+    }
+  }
+
+  nodes.push({
+    id: 'origin',
+    x: frame.originX,
+    y: frame.originY,
+    radius: 3,
+    opacity: config.originNodeOpacity,
+    origin: true
+  });
+
+  return {
+    width: viewWidth,
+    height: viewHeight,
+    horizonY: frame.horizonY,
+    originX: frame.originX,
+    originY: frame.originY,
+    vanishingPointX: frame.vanishingPointX,
+    vanishingPointY: frame.vanishingPointY,
+    lines,
+    nodes
+  };
+}
+
+function resolveQualityConfig(
+  config: SpatialProjectionGridConfig,
+  quality: AmbientQuality
+): SpatialProjectionGridConfig {
+  if (quality === 'off') {
+    return { ...config, enabled: false, animationSpeed: 0 };
+  }
+
+  if (quality === 'low') {
+    return {
+      ...config,
+      minorDivisions: Math.max(2, Math.round(config.minorDivisions * 0.55)),
+      visibleDepth: Math.max(7, Math.round(config.visibleDepth * 0.72)),
+      visibleWidth: Math.max(6, Math.round(config.visibleWidth * 0.74)),
+      majorLineOpacity: config.majorLineOpacity * 0.78,
+      minorLineOpacity: config.minorLineOpacity * 0.58,
+      nodeOpacity: config.nodeOpacity * 0.58,
+      glowIntensity: config.glowIntensity * 0.62,
+      fogIntensity: config.fogIntensity * 0.82,
+      animationSpeed: config.animationSpeed * 0.5
+    };
+  }
+
+  if (quality === 'high') {
+    return {
+      ...config,
+      minorDivisions: Math.min(8, config.minorDivisions + 1),
+      visibleDepth: Math.round(config.visibleDepth * 1.12),
+      visibleWidth: Math.round(config.visibleWidth * 1.08),
+      majorLineOpacity: config.majorLineOpacity * 1.08,
+      minorLineOpacity: config.minorLineOpacity * 1.12,
+      nodeOpacity: config.nodeOpacity * 1.12,
+      glowIntensity: config.glowIntensity * 1.16
+    };
+  }
+
+  return config;
+}
+
+function clampGridConfig(config: SpatialProjectionGridConfig): SpatialProjectionGridConfig {
+  return {
+    ...config,
+    majorStep: clamp(config.majorStep, 48, 180),
+    minorDivisions: Math.round(clamp(config.minorDivisions, 1, 10)),
+    visibleDepth: Math.round(clamp(config.visibleDepth, 4, 24)),
+    visibleWidth: Math.round(clamp(config.visibleWidth, 4, 18)),
+    vanishingPointX: clamp(config.vanishingPointX, 0.08, 0.92),
+    vanishingPointY: clamp(config.vanishingPointY, 0.08, 0.72),
+    horizonY: clamp(config.horizonY, 0.12, 0.82),
+    originY: clamp(config.originY, 0.58, 1.05),
+    perspectiveTilt: clamp01(config.perspectiveTilt),
+    horizonFalloff: clamp01(config.horizonFalloff),
+    lateralFalloff: clamp01(config.lateralFalloff),
+    majorLineOpacity: clamp01(config.majorLineOpacity),
+    minorLineOpacity: clamp01(config.minorLineOpacity),
+    nodeOpacity: clamp01(config.nodeOpacity),
+    originNodeOpacity: clamp01(config.originNodeOpacity),
+    glowIntensity: clamp01(config.glowIntensity),
+    fogIntensity: clamp01(config.fogIntensity),
+    animationSpeed: clamp01(config.animationSpeed)
+  };
+}
+
+function resolveLineOpacity(
+  kind: SpatialProjectionGridLineKind,
+  depthRatio: number,
+  lateralRatio: number,
+  config: SpatialProjectionGridConfig
+): number {
+  const baseOpacity =
+    kind === 'axis'
+      ? config.majorLineOpacity * 1.35
+      : kind === 'major'
+        ? config.majorLineOpacity
+        : kind === 'minor'
+          ? config.minorLineOpacity
+          : config.minorLineOpacity * 0.45;
+
+  return clamp01(baseOpacity * falloff(depthRatio, config.horizonFalloff) * falloff(lateralRatio, config.lateralFalloff));
+}
+
+function createProjectionFrame(config: SpatialProjectionGridConfig): SpatialProjectionFrame {
+  return {
+    originX: config.vanishingPointX * viewWidth,
+    originY: config.originY * viewHeight,
+    horizonX: config.vanishingPointX * viewWidth,
+    horizonY: config.horizonY * viewHeight,
+    vanishingPointX: config.vanishingPointX * viewWidth,
+    vanishingPointY: config.vanishingPointY * viewHeight
+  };
+}
+
+function projectDepthY(depthRatio: number, perspectiveTilt: number, frame: SpatialProjectionFrame): number {
+  const easedDepth = 1 - Math.pow(1 - clamp01(depthRatio), 1.8 + perspectiveTilt * 1.4);
+  return frame.originY - easedDepth * (frame.originY - frame.horizonY);
+}
+
+function projectWidthFactor(depthRatio: number, perspectiveTilt: number): number {
+  return 1 - clamp01(depthRatio) * (0.72 + perspectiveTilt * 0.18);
+}
+
+function projectDepthX(
+  widthIndex: number,
+  depthRatio: number,
+  config: SpatialProjectionGridConfig,
+  frame: SpatialProjectionFrame
+): number {
+  const widthFactor = projectWidthFactor(depthRatio, config.perspectiveTilt);
+  const depthX = frame.originX + widthIndex * config.majorStep * widthFactor;
+
+  return depthX + (frame.horizonX - frame.originX) * depthRatio;
+}
+
+function falloff(value: number, amount: number): number {
+  return Math.pow(1 - clamp01(value), 0.7 + amount * 1.7);
+}
+
+function clamp01(value: number): number {
+  return clamp(value, 0, 1);
+}
+
+function clamp(value: number, min: number, max: number): number {
+  if (!Number.isFinite(value)) {
+    return min;
+  }
+
+  return Math.min(max, Math.max(min, value));
+}

package/src/ambient/spatialProjectionGridPresets.ts

@@ -0,0 +1,152 @@
+import type { RuntimePhase } from '../konitifRuntimePhaseTokens';
+import { normalizeKonitifRuntimePhase } from '../konitifRuntimePhaseTokens';
+import type { SpatialProjectionGridConfig, SpatialProjectionGridPresetName } from './spatialProjectionGridTypes';
+
+const defaultSpatialGridFrame = {
+  vanishingPointX: 0.5,
+  vanishingPointY: 0.47,
+  horizonY: 0.51,
+  originY: 0.82
+} satisfies Pick<SpatialProjectionGridConfig, 'vanishingPointX' | 'vanishingPointY' | 'horizonY' | 'originY'>;
+
+export const spatialProjectionGridPresets: Record<SpatialProjectionGridPresetName, SpatialProjectionGridConfig> = {
+  calm: {
+    enabled: true,
+    ...defaultSpatialGridFrame,
+    majorStep: 96,
+    minorDivisions: 4,
+    visibleDepth: 11,
+    visibleWidth: 9,
+    perspectiveTilt: 0.66,
+    horizonFalloff: 0.78,
+    lateralFalloff: 0.72,
+    majorLineOpacity: 0.24,
+    minorLineOpacity: 0.08,
+    nodeOpacity: 0.28,
+    originNodeOpacity: 0.76,
+    glowIntensity: 0.32,
+    fogIntensity: 0.34,
+    animationSpeed: 0.08
+  },
+  focus: {
+    enabled: true,
+    ...defaultSpatialGridFrame,
+    majorStep: 96,
+    minorDivisions: 5,
+    visibleDepth: 12,
+    visibleWidth: 10,
+    perspectiveTilt: 0.68,
+    horizonFalloff: 0.72,
+    lateralFalloff: 0.68,
+    majorLineOpacity: 0.34,
+    minorLineOpacity: 0.1,
+    nodeOpacity: 0.38,
+    originNodeOpacity: 0.88,
+    glowIntensity: 0.46,
+    fogIntensity: 0.32,
+    animationSpeed: 0.1
+  },
+  runtime: {
+    enabled: true,
+    ...defaultSpatialGridFrame,
+    majorStep: 92,
+    minorDivisions: 5,
+    visibleDepth: 13,
+    visibleWidth: 11,
+    perspectiveTilt: 0.7,
+    horizonFalloff: 0.74,
+    lateralFalloff: 0.7,
+    majorLineOpacity: 0.3,
+    minorLineOpacity: 0.1,
+    nodeOpacity: 0.36,
+    originNodeOpacity: 0.84,
+    glowIntensity: 0.42,
+    fogIntensity: 0.38,
+    animationSpeed: 0.16
+  },
+  analysis: {
+    enabled: true,
+    ...defaultSpatialGridFrame,
+    majorStep: 88,
+    minorDivisions: 6,
+    visibleDepth: 14,
+    visibleWidth: 12,
+    perspectiveTilt: 0.72,
+    horizonFalloff: 0.7,
+    lateralFalloff: 0.66,
+    majorLineOpacity: 0.38,
+    minorLineOpacity: 0.13,
+    nodeOpacity: 0.42,
+    originNodeOpacity: 0.9,
+    glowIntensity: 0.48,
+    fogIntensity: 0.36,
+    animationSpeed: 0.18
+  },
+  recovery: {
+    enabled: true,
+    ...defaultSpatialGridFrame,
+    majorStep: 100,
+    minorDivisions: 4,
+    visibleDepth: 10,
+    visibleWidth: 9,
+    perspectiveTilt: 0.65,
+    horizonFalloff: 0.82,
+    lateralFalloff: 0.74,
+    majorLineOpacity: 0.28,
+    minorLineOpacity: 0.07,
+    nodeOpacity: 0.32,
+    originNodeOpacity: 0.78,
+    glowIntensity: 0.4,
+    fogIntensity: 0.42,
+    animationSpeed: 0.1
+  },
+  safeMode: {
+    enabled: true,
+    ...defaultSpatialGridFrame,
+    majorStep: 112,
+    minorDivisions: 2,
+    visibleDepth: 8,
+    visibleWidth: 7,
+    perspectiveTilt: 0.62,
+    horizonFalloff: 0.88,
+    lateralFalloff: 0.82,
+    majorLineOpacity: 0.18,
+    minorLineOpacity: 0.04,
+    nodeOpacity: 0.16,
+    originNodeOpacity: 0.48,
+    glowIntensity: 0.16,
+    fogIntensity: 0.18,
+    animationSpeed: 0.02
+  }
+};
+
+export function getSpatialProjectionGridPresetForPhase(
+  phase: RuntimePhase | string | null | undefined
+): SpatialProjectionGridPresetName {
+  const resolvedPhase = normalizeKonitifRuntimePhase(phase);
+
+  switch (resolvedPhase) {
+    case 'BOOT':
+    case 'LAUNCH_GATE':
+    case 'CONTEXT_RESOLVED':
+    case 'SUSPENDING':
+    case 'SUSPENDED':
+      return 'calm';
+    case 'PREFLIGHT':
+      return 'analysis';
+    case 'PLANNED':
+      return 'focus';
+    case 'INITIALIZING':
+    case 'HYDRATING':
+    case 'RUNNING':
+    case 'RESUMING':
+      return 'runtime';
+    case 'TEARDOWN':
+    case 'RECOVERY':
+      return 'recovery';
+    case 'SAFE_MODE':
+      return 'safeMode';
+    default:
+      return 'calm';
+  }
+}

package/src/ambient/spatialProjectionGridTypes.ts

@@ -0,0 +1,72 @@
+import type { RuntimePhase } from '../konitifRuntimePhaseTokens';
+import type { AmbientQuality } from './spatialAmbientTypes';
+
+export type SpatialProjectionGridPresetName =
+  | 'calm'
+  | 'focus'
+  | 'runtime'
+  | 'analysis'
+  | 'recovery'
+  | 'safeMode';
+
+export type SpatialProjectionGridConfig = {
+  enabled: boolean;
+  majorStep: number;
+  minorDivisions: number;
+  visibleDepth: number;
+  visibleWidth: number;
+  vanishingPointX: number;
+  vanishingPointY: number;
+  horizonY: number;
+  originY: number;
+  perspectiveTilt: number;
+  horizonFalloff: number;
+  lateralFalloff: number;
+  majorLineOpacity: number;
+  minorLineOpacity: number;
+  nodeOpacity: number;
+  originNodeOpacity: number;
+  glowIntensity: number;
+  fogIntensity: number;
+  animationSpeed: number;
+};
+
+export type SpatialProjectionGridResolveOptions = {
+  phase?: RuntimePhase | string | null;
+  quality?: AmbientQuality;
+  reducedMotion?: boolean;
+  config?: Partial<SpatialProjectionGridConfig> | null;
+};
+
+export type SpatialProjectionGridLineKind = 'major' | 'minor' | 'tertiary' | 'axis';
+
+export type SpatialProjectionGridLine = {
+  id: string;
+  kind: SpatialProjectionGridLineKind;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  opacity: number;
+};
+
+export type SpatialProjectionGridNode = {
+  id: string;
+  x: number;
+  y: number;
+  radius: number;
+  opacity: number;
+  origin?: boolean;
+};
+
+export type SpatialProjectionGridGeometry = {
+  width: number;
+  height: number;
+  horizonY: number;
+  originX: number;
+  originY: number;
+  vanishingPointX: number;
+  vanishingPointY: number;
+  lines: SpatialProjectionGridLine[];
+  nodes: SpatialProjectionGridNode[];
+};

package/src/ambient/themeToAmbientUniforms.ts

@@ -0,0 +1,3 @@
+export type KonitifAmbientUniforms={fogColor:[number,number,number];lightColor:[number,number,number];particleColor:[number,number,number];intensity:number;blurDepth:number;tiltStrength:number};
+const hexToRgb01=(hex:string):[number,number,number]=>{const v=Number.parseInt(hex.replace('#',''),16);return[((v>>16)&255)/255,((v>>8)&255)/255,(v&255)/255];};
+export function createKonitifAmbientUniforms(theme:'dark'|'light'):KonitifAmbientUniforms{return theme==='light'?{fogColor:hexToRgb01('#dce8ff'),lightColor:hexToRgb01('#ffffff'),particleColor:hexToRgb01('#8aa4c8'),intensity:.42,blurDepth:.32,tiltStrength:.35}:{fogColor:hexToRgb01('#145078'),lightColor:hexToRgb01('#22d3ee'),particleColor:hexToRgb01('#aadcff'),intensity:.72,blurDepth:.46,tiltStrength:.55};}

package/src/components/KonitifBadge.svelte

@@ -0,0 +1,2 @@
+<div class="konitif-component"><slot /></div>
+<style>.konitif-component{border:1px solid var(--k-border-soft);background:var(--k-bg-surface);color:var(--k-text-primary);border-radius:14px;padding:12px;backdrop-filter:blur(14px)}</style>

package/src/components/KonitifButton.svelte

@@ -0,0 +1,2 @@
+<div class="konitif-component"><slot /></div>
+<style>.konitif-component{border:1px solid var(--k-border-soft);background:var(--k-bg-surface);color:var(--k-text-primary);border-radius:14px;padding:12px;backdrop-filter:blur(14px)}</style>

package/src/components/KonitifCard.svelte

@@ -0,0 +1,2 @@
+<div class="konitif-component"><slot /></div>
+<style>.konitif-component{border:1px solid var(--k-border-soft);background:var(--k-bg-surface);color:var(--k-text-primary);border-radius:14px;padding:12px;backdrop-filter:blur(14px)}</style>

package/src/components/KonitifGlassSurface.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">export let active=false;</script>
+<div class:active class="konitif-glass"><slot /></div>
+<style>.konitif-glass{border:1px solid var(--k-border-soft);background:var(--k-bg-surface);backdrop-filter:blur(18px) saturate(1.25);box-shadow:0 24px 80px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);border-radius:18px}.konitif-glass.active{box-shadow:0 0 0 1px var(--k-glow-primary),0 28px 90px rgba(0,0,0,.26),0 0 48px var(--k-glow-primary)}</style>

package/src/components/KonitifIconFrame.svelte

@@ -0,0 +1,2 @@
+<div class="konitif-component"><slot /></div>
+<style>.konitif-component{border:1px solid var(--k-border-soft);background:var(--k-bg-surface);color:var(--k-text-primary);border-radius:14px;padding:12px;backdrop-filter:blur(14px)}</style>

package/src/components/KonitifPanel.svelte

@@ -0,0 +1,2 @@
+<div class="konitif-component"><slot /></div>
+<style>.konitif-component{border:1px solid var(--k-border-soft);background:var(--k-bg-surface);color:var(--k-text-primary);border-radius:14px;padding:12px;backdrop-filter:blur(14px)}</style>

package/src/depth/SpatialDepthLayer.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { getSpatialDepthLayer } from './spatialDepthTypes';
+  import type { KonitifDepthLevel } from '../focus/perceptualFocusTypes';
+
+  export let depth: KonitifDepthLevel = 'workspace';
+  export let active = false;
+  export let parallax = true;
+
+  $: layer = getSpatialDepthLayer(depth);
+  $: layerStyle = [
+    `--k-depth-layer-z: ${layer.parallax * 120}px`,
+    `--k-depth-layer-parallax: ${parallax ? layer.parallax : 0}`,
+    `--k-depth-layer-light-response: ${layer.lightResponse}`
+  ].join('; ');
+</script>
+
+<div
+  class="konitif-depth-layer"
+  data-depth={depth}
+  data-active={active}
+  style={layerStyle}
+>
+  <slot />
+</div>
+
+<style>
+  .konitif-depth-layer {
+    position: relative;
+    opacity: var(--k-depth-layer-opacity, 1);
+    filter: blur(var(--k-depth-layer-blur, 0)) contrast(var(--k-depth-layer-contrast, 1));
+    box-shadow: var(--k-depth-layer-shadow, none);
+    transition:
+      filter 360ms ease,
+      opacity 360ms ease,
+      box-shadow 420ms ease;
+  }
+
+  .konitif-depth-layer[data-active='true'] {
+    opacity: 1;
+    filter: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .konitif-depth-layer {
+      transform: none;
+      transition-duration: 1ms;
+    }
+  }
+</style>

package/src/depth/SpatialDepthStack.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  export let active = true;
+  export let perspective = 1200;
+</script>
+
+<div
+  class="konitif-depth-stack"
+  data-konitif-depth-stack
+  data-konitif-depth-active={active}
+  style={`--k-depth-perspective: ${perspective}px;`}
+>
+  <slot />
+</div>
+
+<style>
+  .konitif-depth-stack {
+    position: relative;
+    transform-style: preserve-3d;
+    perspective: var(--k-depth-perspective);
+  }
+
+  .konitif-depth-stack[data-konitif-depth-active='false'] {
+    perspective: none;
+  }
+</style>

package/src/depth/spatialDepthTokens.css

@@ -0,0 +1,82 @@
+[data-workbench-theme='konitif'],
+[data-theme='konitif-dark'],
+[data-theme='konitif-light'] {
+  --k-depth-ambient-blur: 1.8px;
+  --k-depth-background-blur: 1.1px;
+  --k-depth-workspace-blur: 0.36px;
+  --k-depth-panel-blur: 0.12px;
+  --k-depth-active-blur: 0px;
+  --k-depth-overlay-blur: 0px;
+
+  --k-depth-ambient-opacity: 0.64;
+  --k-depth-background-opacity: 0.74;
+  --k-depth-workspace-opacity: 0.92;
+  --k-depth-panel-opacity: 0.98;
+  --k-depth-active-opacity: 1;
+  --k-depth-overlay-opacity: 1;
+
+  --k-depth-ambient-contrast: 0.88;
+  --k-depth-background-contrast: 0.92;
+  --k-depth-workspace-contrast: 0.98;
+  --k-depth-panel-contrast: 1;
+  --k-depth-active-contrast: 1.04;
+  --k-depth-overlay-contrast: 1.02;
+
+  --k-depth-ambient-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.08);
+  --k-depth-background-shadow: 0 0.75rem 2.4rem rgba(0, 0, 0, 0.12);
+  --k-depth-workspace-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.16);
+  --k-depth-panel-shadow: 0 1.2rem 3.8rem rgba(0, 0, 0, 0.2);
+  --k-depth-active-shadow: 0 1.4rem 4.8rem rgba(0, 0, 0, 0.28);
+  --k-depth-overlay-shadow: 0 1.8rem 5.8rem rgba(0, 0, 0, 0.34);
+}
+
+[data-theme='konitif-light'] {
+  --k-depth-ambient-shadow: 0 0.5rem 2rem rgba(45, 65, 95, 0.05);
+  --k-depth-background-shadow: 0 0.75rem 2.4rem rgba(45, 65, 95, 0.08);
+  --k-depth-workspace-shadow: 0 1rem 3rem rgba(45, 65, 95, 0.1);
+  --k-depth-panel-shadow: 0 1.2rem 3.8rem rgba(45, 65, 95, 0.13);
+  --k-depth-active-shadow: 0 1.4rem 4.8rem rgba(45, 65, 95, 0.17);
+  --k-depth-overlay-shadow: 0 1.8rem 5.8rem rgba(45, 65, 95, 0.2);
+}
+
+.konitif-depth-layer[data-depth='ambient'] {
+  --k-depth-layer-blur: var(--k-depth-ambient-blur);
+  --k-depth-layer-opacity: var(--k-depth-ambient-opacity);
+  --k-depth-layer-contrast: var(--k-depth-ambient-contrast);
+  --k-depth-layer-shadow: var(--k-depth-ambient-shadow);
+}
+
+.konitif-depth-layer[data-depth='background'] {
+  --k-depth-layer-blur: var(--k-depth-background-blur);
+  --k-depth-layer-opacity: var(--k-depth-background-opacity);
+  --k-depth-layer-contrast: var(--k-depth-background-contrast);
+  --k-depth-layer-shadow: var(--k-depth-background-shadow);
+}
+
+.konitif-depth-layer[data-depth='workspace'] {
+  --k-depth-layer-blur: var(--k-depth-workspace-blur);
+  --k-depth-layer-opacity: var(--k-depth-workspace-opacity);
+  --k-depth-layer-contrast: var(--k-depth-workspace-contrast);
+  --k-depth-layer-shadow: var(--k-depth-workspace-shadow);
+}
+
+.konitif-depth-layer[data-depth='panel'] {
+  --k-depth-layer-blur: var(--k-depth-panel-blur);
+  --k-depth-layer-opacity: var(--k-depth-panel-opacity);
+  --k-depth-layer-contrast: var(--k-depth-panel-contrast);
+  --k-depth-layer-shadow: var(--k-depth-panel-shadow);
+}
+
+.konitif-depth-layer[data-depth='active'] {
+  --k-depth-layer-blur: var(--k-depth-active-blur);
+  --k-depth-layer-opacity: var(--k-depth-active-opacity);
+  --k-depth-layer-contrast: var(--k-depth-active-contrast);
+  --k-depth-layer-shadow: var(--k-depth-active-shadow);
+}
+
+.konitif-depth-layer[data-depth='overlay'] {
+  --k-depth-layer-blur: var(--k-depth-overlay-blur);
+  --k-depth-layer-opacity: var(--k-depth-overlay-opacity);
+  --k-depth-layer-contrast: var(--k-depth-overlay-contrast);
+  --k-depth-layer-shadow: var(--k-depth-overlay-shadow);
+}