/* Datakar Design Tokens v2 — visual language aligned with the established Datakar app UI. */
:root {
  color-scheme: light;

  /* Brand and semantic colors */
  --dk-color-primary: #e67e22;
  --dk-color-primary-hover: #e49520;
  --dk-color-complementary: #8fcb6f;
  --dk-color-bg: #fafafa;
  --dk-color-surface: #ffffff;
  --dk-color-surface-soft: #f2f2f2;
  --dk-color-surface-hover: #eaeaea;
  --dk-color-text: #222222;
  --dk-color-text-soft: #444444;
  --dk-color-muted: #666666;
  --dk-color-border: #e0e0e0;
  --dk-color-focus: var(--dk-color-primary);
  --dk-color-overlay: rgb(0 0 0 / 0.28);
  --dk-color-success: #16794a;
  --dk-color-error: #b42318;

  /* Typography */
  --dk-font-sans: "Ravi", Arial, sans-serif;
  --dk-font-size-xs: 0.82rem;
  --dk-font-size-sm: 0.95rem;
  --dk-font-size-md: 1rem;
  --dk-font-size-lg: 1.25rem;
  --dk-font-size-xl: 1.7rem;
  --dk-line-height: 1.5;
  --dk-font-weight-regular: 400;
  --dk-font-weight-bold: 700;

  /* Spacing — based on the established Datakar app rhythm */
  --dk-space-1: 0.25rem;
  --dk-space-2: 0.55rem;
  --dk-space-3: 0.8rem;
  --dk-space-4: 1.1rem;
  --dk-space-5: 1.65rem;
  --dk-space-6: 2.2rem;
  --dk-space-7: 3rem;
  --dk-space-8: 4.4rem;

  /* Radius */
  --dk-radius-sm: 6px;
  --dk-radius-md: 8px;
  --dk-radius-lg: 10px;
  --dk-radius-pill: 999px;

  /* Layout */
  --dk-container: 800px;
  --dk-shell-max: 1180px;
  --dk-page-gutter: 1.1rem;

  /* Controls */
  --dk-control-min-height: 48px;
  --dk-input-min-height: 54px;

  /* Motion */
  --dk-duration-fast: 150ms;
  --dk-duration-normal: 220ms;
  --dk-duration-slow: 280ms;
  --dk-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Elevation */
  --dk-shadow-sm: 0 4px 18px rgb(0 0 0 / 0.04);
  --dk-shadow-md: 0 14px 36px rgb(0 0 0 / 0.10);

  /* Layering */
  --dk-z-header: 100;
  --dk-z-backdrop: 190;
  --dk-z-drawer: 200;
  --dk-z-dropdown: 220;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --dk-color-primary: #f08a24;
    --dk-color-primary-hover: #f0a03a;
    --dk-color-complementary: #9bd27d;
    --dk-color-bg: #121212;
    --dk-color-surface: #1c1c1c;
    --dk-color-surface-soft: #252525;
    --dk-color-surface-hover: #303030;
    --dk-color-text: #f2f2f2;
    --dk-color-text-soft: #d8d8d8;
    --dk-color-muted: #b5b5b5;
    --dk-color-border: #353535;
    --dk-color-focus: var(--dk-color-primary);
    --dk-color-overlay: rgb(0 0 0 / 0.52);
    --dk-shadow-sm: 0 6px 24px rgb(0 0 0 / 0.22);
    --dk-shadow-md: 0 16px 42px rgb(0 0 0 / 0.38);
  }
}