/**
 * Tokens
 *
 * Naming convention: --color-{name}-{part}[-{state}]
 *   part  : surface | fg | border | bg | text
 *   state : hover | active (optional)
 *
 * See DESIGN_SYSTEM.md.
 */

@theme {
  /*
   * Elevation ladder — strictly monotonic, z-order low → high.
   * Dark: darker = lower. Light: lighter = higher (inverted toward white).
   *
   * Level  Name    Roles
   *   0    void    window gaps, scrim base
   *   1    rail    L0 icon rail
   *   2    chrome  L1/R sidebars, header
   *   3    canvas  base, deck
   *   4    raised  card, group, input
   *   5    bar     toolbar (sticky, drop-shadowed)
   *   6    modal   dialog, modal, popover
   *   7    float   menu, toast, tooltip
   *
   * These are private (--dx-*) knobs — use named surface tokens in components, not these directly.
   */
  --dx-elevation-0: light-dark(var(--color-neutral-300), var(--color-neutral-950));
  --dx-elevation-1: light-dark(var(--color-neutral-200), var(--color-neutral-900));
  --dx-elevation-2: light-dark(var(--color-neutral-125), var(--color-neutral-875));
  --dx-elevation-3: light-dark(var(--color-neutral-125), var(--color-neutral-850));
  --dx-elevation-4: light-dark(var(--color-neutral-100), var(--color-neutral-825));
  --dx-elevation-5: light-dark(var(--color-neutral-75), var(--color-neutral-800));
  --dx-elevation-6: light-dark(var(--color-neutral-50), var(--color-neutral-775));
  --dx-elevation-7: light-dark(white, var(--color-neutral-750));

  /* Surfaces — each maps to exactly one elevation level */
  --color-sidebar-surface: var(--dx-elevation-2);
  --color-header-surface: var(--dx-elevation-2);
  --color-deck-surface: var(--dx-elevation-3);
  --color-base-surface: var(--dx-elevation-3);
  --color-card-surface: var(--dx-elevation-3);
  --color-group-surface: var(--dx-elevation-4);
  /* Subtle alternate of group-surface for zebra striping (e.g. calendar months) — offset off
   * elevation-4 via relative oklch so it tracks the ramp: darker in light mode, lighter in dark. */
  --color-group-alt-surface: light-dark(
    oklch(from var(--dx-elevation-4) calc(l - 0.03) c h),
    oklch(from var(--dx-elevation-4) calc(l + 0.03) c h)
  );
  --color-input-surface: var(--dx-elevation-4);
  --color-toolbar-surface: var(--dx-elevation-5);
  --color-modal-surface: var(--dx-elevation-6);
  --color-popover-surface: var(--dx-elevation-6);

  /* Sidebar / panel layout levels */
  --color-l0-surface: var(--dx-elevation-1);
  --color-l1-surface: var(--dx-elevation-2);
  --color-r0-surface: var(--dx-elevation-2);
  --color-r1-surface: var(--dx-elevation-2);

  --color-scrim-surface: light-dark(
    oklch(from var(--color-neutral-50) l c h / 0.5),
    oklch(from var(--color-neutral-950) l c h / 0.25)
  );

  --color-inverse-surface: light-dark(var(--color-neutral-800), var(--color-neutral-200));
  --color-inverse-fg: light-dark(var(--color-neutral-50), var(--color-neutral-950));

  --color-base-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150));

  /* Sidebar body text. Default sits one ramp stop below the current/selected emphasis. */
  --color-sidebar-fg: light-dark(var(--color-neutral-700), var(--color-neutral-250));
  --color-sidebar-current-fg: light-dark(var(--color-neutral-950), var(--color-neutral-75));

  /* Focus */
  --color-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-850));
  --color-focus-ring: light-dark(var(--color-blue-400), var(--color-blue-600));
  --color-focus-ring-subtle: light-dark(var(--color-neutral-300), var(--color-neutral-600));

  /* Map attention to focus-surface logic so that elements acting as active attention zones highlight correctly on focus. */
  --color-attention-surface: var(--color-focus-surface);
  --color-attention-contains: oklch(from var(--color-accent-bg) l c h / 0.3);

  /* input */
  --color-input-bg: light-dark(var(--color-neutral-250), var(--color-neutral-700));
  --color-input-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150));

  /* 
   * hover (:hover, data-highlighted)
   * `*-base` primitives are the un-offset values; 
   * surface contexts (e.g. .dx-main-sidebar in state.css) re-derive the public token off the base via relative oklch. 
   */
  --dx-hover-surface-base: light-dark(var(--color-neutral-200), var(--color-neutral-850));
  --color-hover-surface: var(--dx-hover-surface-base);
  --color-hover-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150));

  /* current (aria-current) */
  --dx-current-surface-base: light-dark(var(--color-neutral-150), var(--color-neutral-800));
  --dx-current-surface-hover-base: light-dark(var(--color-neutral-150), var(--color-neutral-600));
  --color-current-surface: var(--dx-current-surface-base);
  --color-current-surface-hover: var(--dx-current-surface-hover-base);
  --color-current-fg: light-dark(var(--color-neutral-950), var(--color-neutral-50));

  /* selected (aria-selected) */
  --color-selected-surface: var(--color-current-surface);
  --color-selected-surface-hover: var(--color-current-surface-hover);
  --color-selected-fg: var(--color-current-fg);

  /* Accent (primary) */
  --color-accent-bg: light-dark(var(--color-blue-600), var(--color-blue-700));
  --color-accent-bg-hover: light-dark(var(--color-blue-700), var(--color-blue-800));
  --color-accent-fg: var(--color-blue-100);
  --color-accent-text: light-dark(var(--color-blue-600), var(--color-blue-400));
  --color-accent-text-hover: light-dark(var(--color-blue-500), var(--color-blue-500));

  --color-un-accent: var(--color-neutral-400);
  --color-un-accent-hover: var(--color-neutral-500);

  /* Separator */
  --color-primary-separator: light-dark(var(--color-neutral-300), var(--color-neutral-700));
  --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-700));
  --color-subdued-separator: light-dark(var(--color-neutral-250), var(--color-neutral-750));
  --color-active-separator: light-dark(var(--color-blue-500), var(--color-blue-500));

  /* Scrollbar */
  --color-scrollbar-track: light-dark(var(--color-neutral-50), var(--color-neutral-950));
  --color-scrollbar-thumb: light-dark(var(--color-neutral-200), var(--color-neutral-600));
  --color-scrollbar-thumb-active: light-dark(var(--color-neutral-200), var(--color-neutral-600));
  --color-scrollbar-thumb-hover: light-dark(var(--color-neutral-200), var(--color-neutral-600));

  /* Sheet */
  --color-axis-selected-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
  --color-axis-selected-text: light-dark(var(--color-neutral-100), var(--color-neutral-900));
  --color-axis-surface: light-dark(var(--color-neutral-50), var(--color-neutral-800));
  --color-axis-text: light-dark(var(--color-neutral-800), var(--color-neutral-200));

  /*
   * Grid
   * NOTE: Update main.css when changing grid tokens (and restart dev server).
   */
  --color-grid-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
  --color-grid-fg: light-dark(var(--color-neutral-950), var(--color-neutral-50));
  --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800));
  --color-grid-highlight: oklch(from var(--color-emerald-500) l c h / 0.5);
  --color-grid-selection-surface: light-dark(var(--color-blue-500), var(--color-blue-400));
  --color-grid-selection-fg: light-dark(var(--color-neutral-50), var(--color-neutral-950));
  --color-grid-comment: light-dark(var(--color-green-400), var(--color-green-600));
  --color-grid-comment-active: light-dark(
    oklch(from var(--color-green-400) l c h / 0.5),
    oklch(from var(--color-green-600) l c h / 0.5)
  );

  /* Text */
  --color-placeholder: light-dark(var(--color-neutral-400), var(--color-neutral-600));
  --color-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-600));
  --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400));
}