@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&display=swap");
/* ════════════════════════════════════════════════════════════
 * PDFMax — скин Reactive Resume (дашборд + приложение)
 * Инжектится <link>'ом в /app/apps/web/dist/index.html, файл лежит
 * рядом в dist и отдаётся как /pdfmax-rr.css (bind-mount, см.
 * docker-compose.prod.yml: rr-skin volumes).
 *
 * RR v4 = shadcn/ui + Tailwind v4 → вся палитра в OKLCH-токенах на
 * html.dark. Переопределяем токены → перекрашивается всё приложение
 * разом (кнопки, карточки, сайдбар, поповеры, инпуты). Это leverage-
 * подход: ~20 переменных вместо тысяч селекторов.
 * ════════════════════════════════════════════════════════════ */

/* ── 1. Дизайн-токены: серый дефолт RR → тёплая палитра PDFMax ── */
html.dark,
.dark {
  --background:#1c1813;            --foreground:#f5f1e9;
  --card:#2a241e;                  --card-foreground:#f5f1e9;
  --popover:#2a241e;              --popover-foreground:#f5f1e9;
  --primary:#ff5a30;              --primary-foreground:#ffffff;
  --secondary:#2a241e;            --secondary-foreground:#f5f1e9;
  --muted:#221d18;                --muted-foreground:rgba(245,241,233,.62);
  --accent:rgba(255,90,48,.15);   --accent-foreground:#ff5a30;
  --destructive:#e5484d;          --destructive-foreground:#ffffff;
  --border:rgba(255,255,255,.10);
  --input:rgba(255,255,255,.14);
  --ring:#ff5a30;
  --radius:.7rem;
  --brand:#ff5a30;

  /* Сайдбар (был серый, активный пункт — синий) → тёплый + оранжевый акцент */
  --sidebar:#191510;                          --sidebar-foreground:#f5f1e9;
  --sidebar-primary:#ff5a30;                  --sidebar-primary-foreground:#ffffff;
  --sidebar-accent:rgba(255,90,48,.15);       --sidebar-accent-foreground:#ff5a30;
  --sidebar-border:rgba(255,255,255,.08);     --sidebar-ring:#ff5a30;
}

/* Светлая тема — на случай если юзер переключит (тёплая бумажная) */
html:not(.dark),
:root:not(.dark) {
  --primary:#ff5a30;              --primary-foreground:#ffffff;
  --accent:rgba(255,90,48,.10);   --accent-foreground:#ff5a30;
  --ring:#ff5a30;                 --brand:#ff5a30;
  --sidebar-primary:#ff5a30;      --sidebar-primary-foreground:#ffffff;
  --sidebar-accent:rgba(255,90,48,.10); --sidebar-accent-foreground:#ff5a30;
  --radius:.7rem;
}

/* ── 2. Точечная полировка поверх токенов ── */

/* Body-фон гарантированно тёплый (некоторые места ставят цвет напрямую) */
body { background: var(--background) !important; }

/* Активный пункт сайдбара — чёткий оранжевый чип с лёгкой подсветкой */
[data-sidebar="menu-button"][data-active="true"],
a[aria-current="page"],
.dark a[aria-current="page"] {
  background: rgba(255,90,48,.15) !important;
  color: #ff5a30 !important;
  font-weight: 600 !important;
}

/* Первичные кнопки/CTA — фирменный градиент вместо плоского */
button[data-slot="button"][class*="bg-primary"],
.bg-primary:not(input) {
  background-image: linear-gradient(135deg,#ff6a42,#ff5a30 55%,#f04e24) !important;
}

/* Кольцо фокуса — оранжевое, мягкое */
*:focus-visible {
  outline-color: #ff5a30 !important;
}

/* Заголовки — наш гротеск (подключаем шрифт ниже) */
h1, h2, h3, .font-heading {
  font-family: "Bricolage Grotesque", var(--font-body), system-ui, sans-serif !important;
  letter-spacing: -.01em;
}

/* Карточки-резюме: мягче скругление + тёплая граница на hover */
[data-slot="card"],
.rounded-lg.border {
  border-radius: 14px !important;
}

/* Скроллбары в тон */
* { scrollbar-color: rgba(255,255,255,.16) transparent; }

/* ── 3. Логотип «Rx» (img /icon/*.svg) → вордмарк PDFMax ──
 * Прячем картинку-марк, рисуем двухцветный вордмарк через ::before/::after.
 * sr-only <h1> остаётся для скринридеров (визуально не занимает место). */
a:has(> img[src*="/icon/"]) img { display: none !important; }
a:has(> img[src*="/icon/"]) {
  font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
  gap: 0 !important;
}
a:has(> img[src*="/icon/"])::before { content: "PDF"; color: var(--foreground); }
a:has(> img[src*="/icon/"])::after  { content: "Max"; color: var(--primary); }

/* ── 4. Карточки-резюме — глубже: радиус, граница, hover-glow ──
 * Грань карточки = .aspect-page.rounded-md (фон уже наш --card). */
.aspect-page.rounded-md {
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.55) !important;
  transition: box-shadow .25s, border-color .2s !important;
}
.grid > div:hover .aspect-page.rounded-md,
.grid > div:focus-within .aspect-page.rounded-md {
  border-color: var(--primary) !important;
  box-shadow: 0 18px 46px -14px rgba(255,90,48,.38) !important;
}
/* «+»/стрелка на пустых карточках Create/Import — в акцент на hover */
.grid > div:hover .aspect-page svg { color: var(--primary) !important; opacity: 1 !important; }
/* Подпись под карточкой — заголовок гротеском */
.grid h4, .grid [class*="font-medium"] {
  font-family: "Bricolage Grotesque", var(--font-body), sans-serif !important;
}

/* ── 5. Билдер — точечная полировка поверх токенов ──
 * Инпуты/селекты/textarea — единое мягкое скругление. */
input, textarea, select,
[data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"] {
  border-radius: 9px !important;
}
/* Слайдеры (Sidebar Width, Font Size) — оранжевый трек */
[data-slot="slider-range"], [role="slider"] ~ [class*="range"] {
  background: var(--primary) !important;
}
/* Карточки настроек справа (Template/Layout/Typography) — мягче */
[data-slot="card"], .rounded-lg.border, .rounded-md.border {
  border-radius: 14px !important;
}
/* Активная иконка левого рейла билдера — акцент */
[aria-current="true"] svg, [data-active="true"] svg { color: var(--primary) !important; }