/* ============================================================================
   RinCraft — дизайн-токены, сброс и базовая типографика
   ----------------------------------------------------------------------------
   Палитра выведена из логотипа images/logo-source.png:
     градиент плиты  #F112E0 (верх) → #810A63 (низ)
     тёмная плита    #121833
     светлая буква   #F3F5F6
   Порядок: сначала сброс, потом токены, потом типографика.
   ========================================================================= */

/* ---------------------------------------------------------------- Токены --- */
:root {
    /* --- Бренд: фиолетовые оттенки логотипа --- */
    --brand-300: #F3A6EF;
    --brand-400: #E010D0;   /* верх градиента логотипа */
    --brand-500: #C40FB4;   /* основной акцент */
    --brand-600: #A30D8B;
    --brand-700: #810A63;   /* низ градиента логотипа */
    --brand-800: #5E0749;
    --brand-900: #4A0739;
    --brand-950: #2B041F;
    --brand-glow: #F112E0;  /* свечение, тени, hover */

    /* Прозрачности бренда */
    --brand-a05: rgba(196, 15, 180, .05);
    --brand-a10: rgba(196, 15, 180, .10);
    --brand-a20: rgba(196, 15, 180, .20);
    --brand-a35: rgba(196, 15, 180, .35);
    --brand-a50: rgba(196, 15, 180, .50);

    /* --- Поверхности (тёмная плита логотипа как база) --- */
    --surface-0: #0A0D1B;   /* фон страницы */
    --surface-1: #121833;   /* карточки */
    --surface-2: #1A2140;   /* вложенные блоки */
    --surface-3: #232B52;   /* hover / актив */
    --surface-glass: rgba(18, 24, 51, .72);

    /* --- Границы --- */
    --line-1: #2A3357;
    --line-2: #3A4573;
    --line-brand: rgba(196, 15, 180, .32);

    /* --- Текст --- */
    --text-1: #F3F5F6;     /* основной (буква логотипа) */
    --text-2: #A8B0C4;
    --text-3: #6E7794;
    --text-inverse: #0A0D1B;

    /* --- Служебные цвета: без изменений, они не часть бренда --- */
    --success: #10B981;
    --success-bg: rgba(16, 185, 129, .12);
    --warning: #F59E0B;
    --warning-bg: rgba(245, 158, 11, .12);
    --danger: #EF4444;
    --danger-bg: rgba(239, 68, 68, .12);
    --info: #3B82F6;
    --info-bg: rgba(59, 130, 246, .12);

    /* --- Типографика --- */
    --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fs-xs: .75rem;      /* 12 */
    --fs-sm: .875rem;     /* 14 */
    --fs-base: 1rem;      /* 16 */
    --fs-md: 1.0625rem;  /* 17 — основной текст */
    --fs-lg: 1.25rem;     /* 20 */
    --fs-xl: 1.5rem;      /* 24 */
    --fs-2xl: 2rem;       /* 32 */
    --fs-3xl: 2.75rem;    /* 44 */
    --fs-4xl: 3.5rem;     /* 56 */
    /* Заголовок героя: слова вроде «ГОЛОГРАФИЧЕСКАЯ» длинные, поэтому
       верхняя граница ниже, а переносы разрешены — иначе текст вылезает
       за колонку и обрезается визуалом. */
    --fs-hero: clamp(1.55rem, 5.6vw, 3.75rem);

    --lh-tight: 1.08;
    --lh-snug: 1.28;
    --lh-base: 1.65;

    --ls-tight: -.02em;
    --ls-wide: .16em;     /* надписи-«моно» */

    /* --- Отступы --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;

    --section-y: clamp(48px, 8vw, 104px);

    /* --- Радиусы --- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 999px;

    /* --- Тени --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .6);
    --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .7);
    --shadow-brand: 0 12px 40px -12px rgba(196, 15, 180, .45);
    --shadow-brand-sm: 0 4px 16px -6px rgba(196, 15, 180, .5);
    --ring-brand: 0 0 0 3px rgba(196, 15, 180, .28);

    /* --- Слои --- */
    --z-header: 100;
    --z-drawer: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;

    /* --- Движение --- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur-fast: 140ms;
    --dur: 240ms;
    --dur-slow: 460ms;

    /* --- Ширины --- */
    --container: 1200px;
    --container-narrow: 880px;

    /* --- Фоновая техно-текстура (без картинок) --- */
    --grid-size: 48px;
    --grid-line: rgba(196, 15, 180, .055);
    --scan-alpha: .016;
}

/* ----------------------------------------------------------------- Сброс --- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color: var(--text-2);
    background-color: var(--surface-0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

a {
    color: var(--brand-400);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

a:hover { color: var(--brand-300); }

ul, ol { list-style: none; }

table { border-collapse: collapse; }

hr {
    border: 0;
    height: 1px;
    background: var(--line-1);
}

/* --------------------------------------------------------- Типографика --- */
h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--text-1);
    text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { text-wrap: pretty; }

strong, b { font-weight: 700; color: var(--text-1); }

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: .9em;
}

/* Надписи-«моно»: кикеры, метки, счётчики */
.mono,
.kicker {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--brand-400);
}

/* --------------------------------------------------------- Базовые поля --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--ring-brand);
    border-radius: var(--r-sm);
}

::selection {
    background: var(--brand-a50);
    color: var(--text-1);
}

/* Скроллбар */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--line-1);
    border: 2px solid var(--surface-0);
    border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--line-2); }

/* --------------------------------------------------- Уважение к движению --- */
/* Пользователь явно попросил не показывать анимации — отключаем всё,
   кроме смены цвета/прозрачности при наведении. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------- Совместимость ---
   tickets.css, documents.css, auth.css, ui.css и admin.css писались до
   перехода на дизайн-систему и ссылаются на старые имена переменных.
   Здесь они переопределены на новые токены, поэтому эти файлы следуют за
   палитрой автоматически. Когда они будут переписаны на токены напрямую,
   блок можно удалить. */
:root {
    --primary-bg:    var(--surface-0);
    --secondary-bg:  var(--surface-1);
    --card-bg:       var(--surface-1);
    --surface-bg:    var(--surface-2);
    --border-color:  var(--line-1);
    --text-primary:  var(--text-1);
    --text-secondary:var(--text-2);
    --text-muted:    var(--text-3);
    --accent-blue:   var(--info);
    --shadow:        var(--shadow-md);
    --shadow-lg:     var(--shadow-lg);
}

/* Админка и служебные стили используют собственный префикс --admin-*.
   Значения совпадают с публичной палитрой, чтобы админка выглядела частью
   того же сайта. */
:root {
    --admin-bg:              var(--surface-0);
    --admin-sidebar:         var(--surface-1);
    --admin-card:            var(--surface-1);
    --admin-surface:         var(--surface-2);
    --admin-border:          var(--line-1);
    --admin-text:            var(--text-1);
    --admin-text-secondary:  var(--text-2);
    --admin-text-muted:      var(--text-3);
    --admin-accent:          var(--brand-500);
    --admin-accent-dark:     var(--brand-600);
    --admin-success:         var(--success);
    --admin-warning:         var(--warning);
    --admin-danger:          var(--danger);
    --admin-blue:            var(--info);
    --admin-shadow:          var(--shadow-md);
    --admin-shadow-lg:       var(--shadow-lg);
    --focus-ring:            0 0 0 4px var(--brand-a20);
}