/*
 * Leva semantic design-token mirror.
 * Contract: DpSemanticTokenManifest 2.0.0
 * Semantic values come from DpSemanticTokenManifest; layout widths come from
 * AppTokens.standard and breakpoints from src/layout/dp_window_class.dart.
 * This file is the only place where the Landing may assign semantic token values.
 */

:root {
  --dp-token-manifest-version: "2.0.0";

  /* Color — DpColors.light. Primary is fill-only; use primary-text for text/focus. */
  --dp-color-primary: #5653E7;
  --dp-color-primary-text: #4338CA;
  --dp-color-primary-text-strong: #312E81;
  --dp-color-on-primary: #FFFFFF;
  --dp-color-accent-soft: #EEF2FF;
  --dp-color-accent-line: #C7D2FE;
  --dp-color-bg: #F6F7FB;
  --dp-color-surface: #FFFFFF;
  --dp-color-surface-muted: #F0F2F7;
  --dp-color-border: #DDE1EA;
  --dp-color-text-primary: #171923;
  --dp-color-text-secondary: #5E6472;
  --dp-color-text-faint: #818998;
  --dp-color-header-bg: #11131B;
  --dp-color-header-text: #F5F7FB;
  --dp-color-header-muted: #B7BDCA;
  --dp-color-header-faint: #959DAD;
  --dp-color-header-active: #272B3F;
  --dp-color-header-border: #2A2F3C;
  --dp-color-success: #137A48;
  --dp-color-warning: #9A5B00;
  --dp-color-danger: #C12C36;
  --dp-color-tag-bg: #EEF0F5;
  --dp-color-tag-text: #4F5664;
  --dp-color-chart1: #2563EB;
  --dp-color-chart2: #C026D3;
  --dp-color-chart3: #D97706;
  --dp-color-chart4: #0F766E;
  --dp-color-chart5: #64748B;
  --dp-color-code-editor-bg: #1E1E1E;
  --dp-color-code-log-bg: #0D1117;
  --dp-color-code-text: #D4D4D4;

  /* Spacing, shape and density — DpSpacing, DpRadius, DpDensity, AppTokens.standard. */
  --dp-space-xs: 4px;
  --dp-space-sm: 8px;
  --dp-space-md: 12px;
  --dp-space-lg: 16px;
  --dp-space-xl: 24px;
  --dp-space-xxl: 32px;
  --dp-space-xxxl: 48px;
  --dp-radius-chip: 4px;
  --dp-radius-button: 6px;
  --dp-radius-panel: 8px;
  --dp-radius-input: 6px;
  --dp-radius-dialog: 12px;

  /* Density — DpDensity (contract 2.0.0): pointer controls 30px, table row padding 8px,
     minimum target 24px (WCAG 2.2 AA 2.5.8). */
  --dp-density-control-height: 30px;
  --dp-density-row-padding: 8px;
  --dp-density-min-target: 24px;

  /* Motion — DpDurations. Components must remove non-essential motion for reduced motion. */
  --dp-duration-stage-reveal: 200ms;
  --dp-duration-skeleton-crossfade: 150ms;
  --dp-duration-hover: 120ms;
  --dp-duration-select: 180ms;
  --dp-duration-panel-expand: 220ms;

  /* Typography — exact CSS projection of DpTypography TextStyle slots. */
  --dp-type-display-small: 400 36px/44px "Pretendard";
  --dp-type-headline-small: 700 28px/36px "Pretendard";
  --dp-type-title-large: 700 22px/30px "Pretendard";
  --dp-type-title-medium: 600 16px/24px "Pretendard";
  --dp-type-title-small: 600 14px/20px "Pretendard";
  --dp-type-body-large: 400 16px/25.6px "Pretendard";
  --dp-type-body-medium: 400 14px/22.4px "Pretendard";
  --dp-type-body-small: 400 13px/20px "Pretendard";
  --dp-type-label-large: 600 14px/20px "Pretendard";
  --dp-type-label-medium: 600 12px/16px "Pretendard";
  --dp-type-label-small: 500 11px/16px "Pretendard";
  --dp-type-code: 400 14px/21px "D2Coding";

  --dp-layout-content-max: 1120px;
  --dp-layout-readable-max: 760px;
  --dp-layout-header-height: 56px;
  --dp-layout-rail: 280px;
  --dp-layout-rail-collapsed: 80px;
  --dp-breakpoint-medium: 600px;
  --dp-breakpoint-expanded: 840px;
  --dp-breakpoint-large: 1240px;

  /* Interaction-state projection — foreground/background/border are never inferred by features. */
  --dp-state-default-background: #FFFFFF;
  --dp-state-default-foreground: #171923;
  --dp-state-default-border: #DDE1EA;
  --dp-state-hover-background: #F0F2F7;
  --dp-state-hover-foreground: #171923;
  --dp-state-hover-border: #DDE1EA;
  --dp-state-pressed-background: #F0F2F7;
  --dp-state-pressed-foreground: #171923;
  --dp-state-pressed-border: #312E81;
  --dp-state-focus-background: #FFFFFF;
  --dp-state-focus-foreground: #171923;
  --dp-state-focus-border: #DDE1EA;
  --dp-state-focus-ring: #4338CA;
  --dp-state-focus-ring-width: 2px;
  --dp-state-selected-background: #EEF2FF;
  --dp-state-selected-foreground: #312E81;
  --dp-state-selected-border: #C7D2FE;
  --dp-state-disabled-background: #F0F2F7;
  --dp-state-disabled-foreground: #5E6472;
  --dp-state-disabled-border: #DDE1EA;
  --dp-state-disabled-opacity: 0.56;
  --dp-state-error-background: #FFFFFF;
  --dp-state-error-foreground: #C12C36;
  --dp-state-error-border: #C12C36;
}

[data-theme="dark"] {
  --dp-color-primary: #9B99FF;
  --dp-color-primary-text: #B9B8FF;
  --dp-color-primary-text-strong: #D8D8FF;
  --dp-color-on-primary: #17163D;
  --dp-color-accent-soft: #24244A;
  --dp-color-accent-line: #454589;
  --dp-color-bg: #0D0F15;
  --dp-color-surface: #171922;
  --dp-color-surface-muted: #222530;
  --dp-color-border: #343846;
  --dp-color-text-primary: #F4F5F8;
  --dp-color-text-secondary: #B6BCC8;
  --dp-color-text-faint: #858C99;
  --dp-color-header-bg: #090B10;
  --dp-color-header-text: #F4F5F8;
  --dp-color-header-muted: #B6BCC8;
  --dp-color-header-faint: #929AA8;
  --dp-color-header-active: #23263B;
  --dp-color-header-border: #292D38;
  --dp-color-success: #5DD39E;
  --dp-color-warning: #F6C177;
  --dp-color-danger: #FF7B84;
  --dp-color-tag-bg: #262A36;
  --dp-color-tag-text: #C3C8D2;
  --dp-color-chart1: #77A5FF;
  --dp-color-chart2: #E287F4;
  --dp-color-chart3: #F6B864;
  --dp-color-chart4: #4DD4C4;
  --dp-color-chart5: #A1AAB8;
  --dp-color-code-editor-bg: #1E1E1E;
  --dp-color-code-log-bg: #0D1117;
  --dp-color-code-text: #C9D1D9;

  --dp-state-default-background: #171922;
  --dp-state-default-foreground: #F4F5F8;
  --dp-state-default-border: #343846;
  --dp-state-hover-background: #222530;
  --dp-state-hover-foreground: #F4F5F8;
  --dp-state-hover-border: #343846;
  --dp-state-pressed-background: #222530;
  --dp-state-pressed-foreground: #F4F5F8;
  --dp-state-pressed-border: #D8D8FF;
  --dp-state-focus-background: #171922;
  --dp-state-focus-foreground: #F4F5F8;
  --dp-state-focus-border: #343846;
  --dp-state-focus-ring: #B9B8FF;
  --dp-state-selected-background: #24244A;
  --dp-state-selected-foreground: #D8D8FF;
  --dp-state-selected-border: #454589;
  --dp-state-disabled-background: #222530;
  --dp-state-disabled-foreground: #B6BCC8;
  --dp-state-disabled-border: #343846;
  --dp-state-error-background: #171922;
  --dp-state-error-foreground: #FF7B84;
  --dp-state-error-border: #FF7B84;
}