/*
 * tokens.css — Stage 12.0.40
 * Visual language alignment с Ozon Seller dashboard.
 * Подключается в base.html ДО Tailwind CDN, переменные используются
 * в components.css и inline-стилях шаблонов.
 */

:root {
  /* Brand — calibrated to Ozon Seller blue but softer */
  --brand-50:  #EBF3FF;
  --brand-100: #D1E3FF;
  --brand-500: #0AA1F7;
  --brand-600: #0086D1;
  --brand-700: #006BA8;

  /* Surface — warm off-white inspired by Ozon */
  --surface-page: #FAFBFC;
  --surface-card: #FFFFFF;
  --surface-tint: #F4F6F9;

  /* Text scale */
  --text-primary:   #1A1F2E;
  --text-secondary: #5B6577;
  --text-meta:      #8B95A7;

  /* Stat values — for big numbers */
  --stat-positive: #00A85A;
  --stat-negative: #E63946;
  --stat-neutral:  #1A1F2E;

  /* Border / shadows — Stage 12.0.246: softer, warmer, more layered */
  --border-subtle: #E6E8EE;
  --border-strong: #D2D6DE;
  --shadow-card:   0 1px 2px rgba(24, 32, 54, 0.03), 0 1px 3px rgba(24, 32, 54, 0.04);
  --shadow-tile-hover: 0 6px 16px -4px rgba(24, 32, 54, 0.10), 0 2px 4px -2px rgba(24, 32, 54, 0.05);
  --radius-card:   12px;
  --radius-tile:   8px;
  --radius-chip:   99px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
}

[data-theme="dark"] {
  /* Dark variant — заготовлен для будущего dark-mode toggle (12.0.29).
     Сейчас не используется автоматически. */
  --surface-page: #0F141C;
  --surface-card: #1A2030;
  --surface-tint: #232B3D;
  --text-primary: #E5E9F2;
  --text-secondary: #A8B0C0;
  --text-meta:    #6C7689;
  --border-subtle: #2B3344;
  --shadow-card:   0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-tile-hover: 0 4px 14px rgba(0, 0, 0, 0.40);
}

/* ──────────────────────────────────────────────────────────────────
 * Extended design system — Stage 12.0.83
 * Дополняет 12.0.40 tokens (выше) полным набором semantic / spacing /
 * radius / shadow / typography токенов под app-shell layout.
 * Старые имена (--surface-page, --text-primary, --brand-*) сохранены —
 * новые алиасы для современных компонентов добавлены ниже.
 * ────────────────────────────────────────────────────────────────── */
:root {
  /* Neutral scale aliases — для нового кода */
  --color-bg:               var(--surface-page);
  --color-surface:          var(--surface-card);
  --color-surface-elevated: var(--surface-card);
  --color-surface-soft:     var(--surface-tint);
  --color-border:           var(--border-subtle);
  --color-border-strong:    var(--border-strong);
  --color-text-primary:     var(--text-primary);
  --color-text-secondary:   var(--text-secondary);
  --color-text-muted:       var(--text-meta);

  /* Brand aliases */
  --color-primary:        var(--brand-600);
  --color-primary-hover:  var(--brand-700);
  --color-primary-soft:   var(--brand-50);
  --color-primary-strong: var(--brand-700);

  /* Semantic */
  --color-success:       #16A34A;
  --color-success-soft:  #F0FDF4;
  --color-success-text:  #166534;
  --color-warning:       #D97706;
  --color-warning-soft:  #FFFBEB;
  --color-warning-text:  #92400E;
  --color-danger:        #DC2626;
  --color-danger-soft:   #FEF2F2;
  --color-danger-text:   #991B1B;
  --color-info:          #0891B2;
  --color-info-soft:     #ECFEFF;
  --color-info-text:     #155E75;

  /* Spacing scale (multiples of 4px) */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows — Stage 12.0.246 refinement: softer ambient + sharper key */
  --shadow-sm: 0 1px 2px rgba(24, 32, 54, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(24, 32, 54, 0.06), 0 2px 4px -2px rgba(24, 32, 54, 0.04);
  --shadow-lg: 0 12px 24px -8px rgba(24, 32, 54, 0.10), 0 4px 8px -4px rgba(24, 32, 54, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(24, 32, 54, 0.16), 0 8px 16px -8px rgba(24, 32, 54, 0.08);

  /* Layout dimensions */
  --sidebar-width: 240px;
  --topbar-height: 56px;

  /* Typography */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Motion — Stage 12.0.246 */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   120ms;
  --duration-normal: 180ms;
  --duration-slow:   240ms;

  /* Focus ring — accessible 3px primary-soft halo */
  --focus-ring:    0 0 0 3px var(--color-primary-soft);
  --focus-ring-strong: 0 0 0 3px color-mix(in oklab, var(--color-primary) 35%, transparent);

  /* Layered shadow refinement — Stage 12.0.246 (overrides 12.0.83 defaults below where needed) */
  --shadow-card-hover: 0 4px 12px -2px rgba(24, 32, 54, 0.08), 0 2px 4px -2px rgba(24, 32, 54, 0.05);
  --shadow-popover: 0 16px 32px -12px rgba(24, 32, 54, 0.18), 0 4px 8px -4px rgba(24, 32, 54, 0.08);
}

/* Apply tokens to root surfaces — Tailwind utility classes продолжают
   работать поверх и могут override локально. */
html, body {
  font-family: var(--font-sans);
  background: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'tnum' 1, 'cv11' 1, 'ss01' 1;
}

/* Stage 12.0.246 — global accessibility & polish defaults */
*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Selection colour matches brand instead of OS default blue */
::selection {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

/* Custom thin scrollbar (WebKit + Firefox) — keeps dashboard quiet */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 999px;
  border: 2px solid var(--surface-page);
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * Typography utility classes (12.0.83)
 * ────────────────────────────────────────────────────────────────── */
.text-display { font-size: 2.25rem;  line-height: 2.5rem;  font-weight: 700; letter-spacing: -0.025em; }
.text-h1      { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; letter-spacing: -0.02em;  }
.text-h2      { font-size: 1.5rem;   line-height: 2rem;    font-weight: 600; letter-spacing: -0.015em; }
.text-h3      { font-size: 1.25rem;  line-height: 1.75rem; font-weight: 600; }
.text-body-lg { font-size: 1rem;     line-height: 1.5rem;  }
.text-body    { font-size: 0.875rem; line-height: 1.5rem;  }
.text-caption { font-size: 0.75rem;  line-height: 1.25rem; color: var(--color-text-secondary); }
.text-mono    { font-family: var(--font-mono); font-size: 0.8125rem; }