/* ──────────────────────────────────────────────────────────────
   Design Playground — shared design tokens
   Подключается в каждом прототипе:  <link rel="stylesheet" href="/shared/tokens.css">
   ────────────────────────────────────────────────────────────── */

:root {
  /* Цвет: нейтральная шкала */
  --dp-bg:            #ffffff;
  --dp-bg-subtle:     #f6f7f9;
  --dp-bg-raised:     #ffffff;
  --dp-border:        #e3e6ea;
  --dp-border-strong: #c9cfd6;
  --dp-text:          #15181c;
  --dp-text-muted:    #5d6670;
  --dp-text-faint:    #8b949e;

  /* Акцент (переопределяйте внутри прототипа) */
  --dp-accent:        #2f6df6;
  --dp-accent-hover:  #1f55d0;
  --dp-accent-weak:   #e8f0ff;
  --dp-on-accent:     #ffffff;

  /* Статусы */
  --dp-success:       #1f8a4c;
  --dp-warning:       #b5760a;
  --dp-danger:        #c7342c;

  /* Типографика */
  --dp-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --dp-size-xs:   0.75rem;
  --dp-size-sm:   0.875rem;
  --dp-size-md:   1rem;
  --dp-size-lg:   1.25rem;
  --dp-size-xl:   1.75rem;
  --dp-size-2xl:  2.5rem;

  /* Пространство */
  --dp-space-1: 4px;
  --dp-space-2: 8px;
  --dp-space-3: 12px;
  --dp-space-4: 16px;
  --dp-space-5: 24px;
  --dp-space-6: 32px;
  --dp-space-7: 48px;
  --dp-space-8: 64px;

  /* Форма */
  --dp-radius-sm: 6px;
  --dp-radius-md: 10px;
  --dp-radius-lg: 16px;
  --dp-radius-full: 999px;

  --dp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --dp-shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --dp-shadow-lg: 0 16px 40px rgba(16, 24, 40, .12);

  --dp-maxw: 1120px;
  --dp-transition: 160ms cubic-bezier(.2, 0, .2, 1);
}

/* Тёмная тема: следует системе, но перебивается data-theme="light" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dp-bg:            #0f1115;
    --dp-bg-subtle:     #15181e;
    --dp-bg-raised:     #1a1e25;
    --dp-border:        #262c35;
    --dp-border-strong: #39414c;
    --dp-text:          #eef1f5;
    --dp-text-muted:    #a3adb9;
    --dp-text-faint:    #727d8a;
    --dp-accent:        #6f9dff;
    --dp-accent-hover:  #8fb4ff;
    --dp-accent-weak:   #1b2740;
    --dp-on-accent:     #0f1115;
    --dp-success:       #4cc281;
    --dp-warning:       #e0a23c;
    --dp-danger:        #f0736a;
    --dp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --dp-shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --dp-shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
  }
}

/* Явное переключение темы атрибутом на <html> */
:root[data-theme="dark"] {
  --dp-bg:            #0f1115;
  --dp-bg-subtle:     #15181e;
  --dp-bg-raised:     #1a1e25;
  --dp-border:        #262c35;
  --dp-border-strong: #39414c;
  --dp-text:          #eef1f5;
  --dp-text-muted:    #a3adb9;
  --dp-text-faint:    #727d8a;
  --dp-accent:        #6f9dff;
  --dp-accent-hover:  #8fb4ff;
  --dp-accent-weak:   #1b2740;
  --dp-on-accent:     #0f1115;
  --dp-success:       #4cc281;
  --dp-warning:       #e0a23c;
  --dp-danger:        #f0736a;
  --dp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --dp-shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  --dp-shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
}