/* Единственный источник темы для трёх страниц. Значения — из tokens/*.json дизайн-кита
 * ux-ui-agent-skills (примитив -> семантика -> компонент); контраст пар замерен.
 * Прочие стили ссылаются только на эти переменные: ни одного сырого цвета, размера или
 * длительности вне этого файла. Без @import и без внешних шрифтов: политика безопасности
 * содержимого запрещает сторонние узлы. */

:root {
  color-scheme: light dark;

  --color-surface-page:      #f9fafb;
  --color-surface-card:      #ffffff;
  --color-surface-raised:    #f3f4f6;
  --color-surface-disabled:  #f3f4f6;

  --color-text-primary:    #111827; /* 16.98:1 на странице */
  --color-text-secondary:  #4b5563; /*  7.23:1 */
  --color-text-muted:      #6b7280; /*  4.63:1 */
  --color-text-disabled:   #d1d5db;
  --color-text-on-action:  #ffffff;
  --color-text-link:       #2563eb; /*  4.95:1 */
  --color-text-link-hover: #1e40af;

  --color-border-default:  #e5e7eb; /* декоративные разделители */
  --color-border-strong:   #6b7280; /* границы контролов, 4.63:1 */
  --color-border-focus:    #3b82f6; /* 3.52:1 */
  --color-border-error:    #ef4444;

  --color-action-primary:        #2563eb; /* белый на нём 5.17:1 */
  --color-action-primary-hover:  #1d4ed8;
  --color-action-primary-active: #1e40af;
  --color-action-secondary-hover:#f3f4f6;

  --color-feedback-success-bg:   #f0fdf4;
  --color-feedback-success-text: #166534;
  --color-feedback-success-icon: #16a34a;
  --color-feedback-warning-bg:   #fffbeb;
  --color-feedback-warning-text: #92400e;
  --color-feedback-warning-icon: #d97706;
  --color-feedback-error-bg:     #fef2f2;
  --color-feedback-error-text:   #991b1b;
  --color-feedback-error-icon:   #dc2626;
  --color-feedback-info-bg:      #eff6ff;
  --color-feedback-info-text:    #1e40af;
  --color-feedback-info-icon:    #2563eb;

  --color-feedback-success-fg: #15803d; /* 4.80:1 на странице */
  --color-feedback-warning-fg: #b45309; /* 4.81:1 */
  --color-feedback-error-fg:   #b91c1c; /* 6.19:1 */
  --color-feedback-info-fg:    #1d4ed8; /* 6.41:1 */

  --color-badge-neutral-bg: #f3f4f6; --color-badge-neutral-text: #374151; /* 9.37:1 */
  --color-badge-success-bg: #dcfce7; --color-badge-success-text: #166534; /* 6.49:1 */
  --color-badge-error-bg:   #fee2e2; --color-badge-error-text:   #991b1b; /* 6.80:1 */
  --color-badge-warning-bg: #fef3c7; --color-badge-warning-text: #92400e; /* 6.37:1 */

  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-display: clamp(var(--text-4xl), 1.5rem + 3.5vw, var(--text-5xl));

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.025em;

  --space-0-5: 0.125rem; --space-1: 0.25rem;  --space-1-5: 0.375rem; --space-2: 0.5rem;
  --space-2-5: 0.625rem; --space-3: 0.75rem;  --space-4: 1rem;       --space-5: 1.25rem;
  --space-6: 1.5rem;     --space-8: 2rem;     --space-10: 2.5rem;    --space-12: 3rem;
  --space-16: 4rem;      --space-20: 5rem;

  --space-page-inline:    var(--space-4);
  --space-page-inline-lg: var(--space-8);
  --space-section-gap:    var(--space-16);
  --space-section-gap-sm: var(--space-10);
  --space-card-padding:   var(--space-6);
  --space-card-padding-sm:var(--space-4);
  --space-card-gap:       var(--space-4);
  --space-stack-xs: var(--space-1); --space-stack-sm: var(--space-2);
  --space-stack-md: var(--space-3); --space-stack-lg: var(--space-4);
  --space-stack-xl: var(--space-6); --space-stack-2xl: var(--space-8);
  --space-button-x: var(--space-4); --space-button-y: var(--space-2-5);
  --space-input-x:  var(--space-3); --space-input-y:  var(--space-2);
  --space-badge-x:  var(--space-2-5); --space-badge-y: var(--space-0-5);
  --space-cell-x:   var(--space-4); --space-cell-y:   var(--space-3);

  --radius-sm:  0.25rem;
  --radius-md:  0.375rem;
  --radius-lg:  0.5rem;
  --radius-xl:  0.75rem;
  --radius-full: 9999px;
  --radius-button: var(--radius-md);
  --radius-input:  var(--radius-md);
  --radius-card:   var(--radius-lg);
  --radius-badge:  var(--radius-full);

  --border-width-thin: 1px;
  --border-width-medium: 2px;

  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-focus-ring: 0 0 0 2px var(--color-surface-page), 0 0 0 4px var(--color-border-focus);

  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-moderate: 300ms;
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-micro:   var(--duration-fast) var(--ease-out);
  --transition-default: var(--duration-base) var(--ease-out);

  --size-control-xs: 1.5rem;
  --size-control-sm: 2rem;
  --size-control-md: 2.5rem;
  --size-control-lg: 3rem;
  --size-icon-sm: 1rem;
  --size-icon-md: 1.25rem;
  --size-icon-lg: 1.5rem;
  --size-header: 3.5rem;
  --size-header-lg: 4rem;

  --opacity-disabled: 0.5;
  --opacity-loading: 0.7;

  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 80rem;
  --container-prose: 65ch;
  --z-sticky: 20;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-surface-page:     #030712;
  --color-surface-card:     #111827;
  --color-surface-raised:   #1f2937;
  --color-surface-disabled: #1f2937;

  --color-text-primary:    #f9fafb; /* 19.27:1 */
  --color-text-secondary:  #d1d5db; /* 13.66:1 */
  --color-text-muted:      #9ca3af; /*  7.93:1 */
  --color-text-disabled:   #6b7280;
  --color-text-on-action:  #ffffff;
  --color-text-link:       #60a5fa; /*  7.92:1 */
  --color-text-link-hover: #93c5fd;

  --color-border-default:  #374151;
  --color-border-strong:   #6b7280;
  --color-border-focus:    #60a5fa;
  --color-border-error:    #f87171;

  --color-action-primary:        #2563eb;
  --color-action-primary-hover:  #1d4ed8;
  --color-action-primary-active: #1e40af;
  --color-action-secondary-hover:#1f2937;

  --color-feedback-success-bg:   #052e16;
  --color-feedback-success-text: #4ade80;
  --color-feedback-success-icon: #4ade80;
  --color-feedback-warning-bg:   #451a03;
  --color-feedback-warning-text: #fbbf24;
  --color-feedback-warning-icon: #fbbf24;
  --color-feedback-error-bg:     #450a0a;
  --color-feedback-error-text:   #f87171;
  --color-feedback-error-icon:   #f87171;
  --color-feedback-info-bg:      #172554;
  --color-feedback-info-text:    #93c5fd;
  --color-feedback-info-icon:    #93c5fd;

  --color-feedback-success-fg: #4ade80;
  --color-feedback-warning-fg: #fbbf24;
  --color-feedback-error-fg:   #f87171;
  --color-feedback-info-fg:    #60a5fa;

  --color-badge-neutral-bg: #1f2937; --color-badge-neutral-text: #d1d5db;
  --color-badge-success-bg: #052e16; --color-badge-success-text: #4ade80;
  --color-badge-error-bg:   #450a0a; --color-badge-error-text:   #f87171;
  --color-badge-warning-bg: #451a03; --color-badge-warning-text: #fbbf24;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-surface-page:     #030712;
    --color-surface-card:     #111827;
    --color-surface-raised:   #1f2937;
    --color-surface-disabled: #1f2937;

    --color-text-primary:    #f9fafb;
    --color-text-secondary:  #d1d5db;
    --color-text-muted:      #9ca3af;
    --color-text-disabled:   #6b7280;
    --color-text-on-action:  #ffffff;
    --color-text-link:       #60a5fa;
    --color-text-link-hover: #93c5fd;

    --color-border-default:  #374151;
    --color-border-strong:   #6b7280;
    --color-border-focus:    #60a5fa;
    --color-border-error:    #f87171;

    --color-action-primary:        #2563eb;
    --color-action-primary-hover:  #1d4ed8;
    --color-action-primary-active: #1e40af;
    --color-action-secondary-hover:#1f2937;

    --color-feedback-success-bg:   #052e16;
    --color-feedback-success-text: #4ade80;
    --color-feedback-success-icon: #4ade80;
    --color-feedback-warning-bg:   #451a03;
    --color-feedback-warning-text: #fbbf24;
    --color-feedback-warning-icon: #fbbf24;
    --color-feedback-error-bg:     #450a0a;
    --color-feedback-error-text:   #f87171;
    --color-feedback-error-icon:   #f87171;
    --color-feedback-info-bg:      #172554;
    --color-feedback-info-text:    #93c5fd;
    --color-feedback-info-icon:    #93c5fd;

    --color-feedback-success-fg: #4ade80;
    --color-feedback-warning-fg: #fbbf24;
    --color-feedback-error-fg:   #f87171;
    --color-feedback-info-fg:    #60a5fa;

    --color-badge-neutral-bg: #1f2937; --color-badge-neutral-text: #d1d5db;
    --color-badge-success-bg: #052e16; --color-badge-success-text: #4ade80;
    --color-badge-error-bg:   #450a0a; --color-badge-error-text:   #f87171;
    --color-badge-warning-bg: #451a03; --color-badge-warning-text: #fbbf24;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-moderate: 0ms;
    --transition-micro:   0ms var(--ease-out);
    --transition-default: 0ms var(--ease-out);
  }
}

@media (forced-colors: active) {
  :root {
    --color-border-default: CanvasText;
    --color-border-strong:  CanvasText;
    --color-text-link:      LinkText;
    --shadow-focus-ring: 0 0 0 2px Canvas, 0 0 0 4px Highlight;
  }
}