/**
 * Ark UI Design Tokens - Endfield Family
 * Depth: 2 (Moderate / 中等)
 * Evidence-based Hypergryph field engineering system visual tokens
 */

:root {
  /* Endfield Family Core Colors */
  --ark-ink: #191919;
  --ark-ink-dark: #101010;
  --ark-ink-light: #222222;
  --ark-paper: #f2f2f0;
  --ark-paper-muted: #d0d0cc;
  --ark-signal: #fffa00; /* Signal / Safety Yellow */
  --ark-signal-dim: #d4cf00;
  --ark-signal-bg: rgba(255, 250, 0, 0.12);
  --ark-state: #00ffa2; /* Tactical Green / Verified */
  --ark-state-bg: rgba(0, 255, 162, 0.12);
  --ark-accent-alt: #00ffa2;
  --ark-danger: #ff4757;
  --ark-danger-bg: rgba(255, 71, 87, 0.12);
  --ark-muted: #888888;
  --ark-muted-light: #aaaaaa;
  --ark-muted-dark: #444444;

  /* Surfaces & Borders */
  --ark-panel: rgba(25, 25, 25, 0.88);
  --ark-panel-solid: #1c1c1e;
  --ark-panel-surface: #242426;
  --ark-panel-hover: #2c2c30;
  --ark-border: rgba(255, 255, 255, 0.12);
  --ark-border-strong: rgba(255, 255, 255, 0.25);
  --ark-border-signal: rgba(255, 250, 0, 0.5);

  /* Typography Stacks */
  --ark-display: "Space Grotesk", "Arial Narrow", "Roboto Condensed", "DIN Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ark-ui: "Space Grotesk", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ark-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  /* Geometry & Rules */
  --ark-radius: 2px;
  --ark-radius-sm: 1px;
  --ark-rule: rgba(255, 255, 255, 0.12);
  --ark-rule-signal: rgba(255, 250, 0, 0.8);
  --ark-rule-dark: rgba(25, 25, 25, 0.24);

  /* Timing & Motion */
  --ark-direct: 180ms cubic-bezier(0.2, 0, 0, 1);
  --ark-reveal: 450ms cubic-bezier(0.22, 0.8, 0.2, 1);
  --ark-ease: cubic-bezier(0.22, 0.8, 0.2, 1);

  /* Depth Level 2 (Moderate) Variables */
  --ark-depth-grid-opacity: 0.35;
  --ark-depth-art-opacity: 0.65;
  --ark-depth-readout-shadow: 0.35rem 0.35rem 0 color-mix(in srgb, var(--ark-signal), transparent 64%);
}

[data-ark-depth="minimal"] {
  --ark-depth-grid-opacity: 0.15;
  --ark-depth-art-opacity: 0.3;
  --ark-depth-readout-shadow: none;
}

[data-ark-depth="moderate"] {
  --ark-depth-grid-opacity: 0.35;
  --ark-depth-art-opacity: 0.65;
  --ark-depth-readout-shadow: 0.35rem 0.35rem 0 color-mix(in srgb, var(--ark-signal), transparent 64%);
}

[data-ark-depth="complex"] {
  --ark-depth-grid-opacity: 0.65;
  --ark-depth-art-opacity: 0.88;
  --ark-depth-readout-shadow: 0.85rem 0.85rem 0 color-mix(in srgb, var(--ark-signal), transparent 40%);
}