/* L-TEX Design System (mirrors new.ltex.com.ua) */

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Inter','system-ui','Segoe UI','Roboto',sans-serif;
  font-size:16px;
  line-height:1.5;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
img,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}

/* === TOKENS === */
:root{
  /* Colors (matches new.ltex.com.ua HSL → hex) */
  --bg:#ffffff;
  --fg:#171f1a;
  --primary:#16a34a;          /* green-600 */
  --primary-hover:#15803d;    /* green-700 */
  --primary-fg:#ffffff;
  --secondary:#f2f4f2;
  --muted:#f2f4f2;
  --muted-fg:#6e7570;
  --accent:#e9b710;
  --destructive:#ef4444;      /* red-500 */
  --destructive-hover:#dc2626;/* red-600 */
  --border:#e1e5e2;
  --input:#e1e5e2;
  --ring:#16a34a;
  --card:#ffffff;
  --card-fg:#171f1a;

  --green-50:#f0fdf4;
  --green-100:#dcfcE7;
  --green-200:#bbf7d0;
  --green-500:#22c55e;
  --green-600:#16a34a;
  --green-700:#15803d;
  --green-900:#14532d;

  --red-50:#fef2f2;
  --red-200:#fecaca;
  --red-300:#fca5a5;
  --red-500:#ef4444;
  --red-600:#dc2626;
  --red-700:#b91c1c;

  --blue-600:#2563eb;
  --amber-50:#fffbeb;
  --amber-500:#f59e0b;
  --amber-700:#b45309;
  --amber-800:#92400e;

  --gray-50:#f9fafb;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --gray-300:#d1d5db;
  --gray-400:#9ca3af;
  --gray-500:#6b7280;
  --gray-600:#4b5563;
  --gray-700:#374151;
  --gray-800:#1f2937;
  --gray-900:#111827;

  /* Sizing */
  --radius-sm:.25rem;
  --radius:.5rem;
  --radius-md:.375rem;
  --radius-lg:.5rem;
  --radius-xl:.75rem;
  --radius-2xl:1rem;
  --radius-full:9999px;

  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-xl:0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1);
  --shadow-2xl:0 25px 50px -12px rgb(0 0 0 / .25);

  --container:1280px;
  --header-h:64px;
  --transition:150ms cubic-bezier(.4,0,.2,1);

  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* === FOCUS === */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* === TYPOGRAPHY === */
h1,h2,h3,h4{font-weight:700;line-height:1.25;color:var(--fg)}
.h1{font-size:1.875rem;font-weight:700;line-height:1.25}      /* 30px */
.h2{font-size:1.25rem;font-weight:700;line-height:1.3}        /* 20px */
.h3{font-size:1.125rem;font-weight:700;line-height:1.35}      /* 18px */
.text-sm{font-size:.875rem}      /* 14 */
.text-xs{font-size:.75rem}       /* 12 */
.text-base{font-size:1rem}       /* 16 */
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}
.text-4xl{font-size:2.25rem}
.font-mono{font-family:'JetBrains Mono','Menlo','Consolas',monospace}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.uppercase{text-transform:uppercase}
.line-through{text-decoration:line-through}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.leading-tight{line-height:1.25}

/* === COLORS UTIL === */
.text-muted{color:var(--muted-fg)}
.text-primary{color:var(--primary)}
.text-destructive{color:var(--destructive)}
.text-red-600{color:var(--red-600)}
.text-red-500{color:var(--red-500)}
.text-gray-300{color:var(--gray-300)}
.text-gray-400{color:var(--gray-400)}
.text-gray-500{color:var(--gray-500)}
.text-gray-600{color:var(--gray-600)}
.text-gray-700{color:var(--gray-700)}
.text-gray-900{color:var(--gray-900)}
.text-green-700{color:var(--green-700)}
.text-amber-700{color:var(--amber-700)}
.text-amber-800{color:var(--amber-800)}
.bg-white{background:#fff}
.bg-gray-50{background:var(--gray-50)}
.bg-gray-100{background:var(--gray-100)}
.bg-gray-900{background:var(--gray-900)}
.bg-green-50{background:var(--green-50)}
.bg-green-600{background:var(--green-600)}
.bg-red-600{background:var(--red-600)}
.bg-blue-600{background:var(--blue-600)}
.bg-amber-50{background:var(--amber-50)}

/* === LAYOUT === */
.container{max-width:var(--container);margin-inline:auto;padding-inline:1rem;width:100%}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.hidden{display:none}
.block{display:block}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-baseline{align-items:baseline}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1 1 0}
.shrink-0{flex-shrink:0}
.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-12{margin-top:3rem}
.mb-2{margin-bottom:.5rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.ml-auto{margin-left:auto}
.p-2{padding:.5rem}
.p-3{padding:.75rem}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.px-2{padding-inline:.5rem}
.px-3{padding-inline:.75rem}
.px-4{padding-inline:1rem}
.py-1{padding-block:.25rem}
.py-2{padding-block:.5rem}
.py-3{padding-block:.75rem}
.py-6{padding-block:1.5rem}
.py-12{padding-block:3rem}
.pt-2{padding-top:.5rem}
.pb-1{padding-bottom:.25rem}
.w-full{width:100%}
.h-full{height:100%}
.min-w-0{min-width:0}
.max-w-md{max-width:28rem}
.max-w-prose{max-width:65ch}
.relative{position:relative}
.absolute{position:absolute}
.sticky{position:sticky}
.inset-0{inset:0}
.top-0{top:0}
.left-2{left:.5rem}
.right-2{right:.5rem}
.top-2{top:.5rem}
.bottom-2{bottom:.5rem}
.z-10{z-index:10}
.z-20{z-index:20}
.z-50{z-index:50}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}
.rounded{border-radius:.25rem}
.rounded-md{border-radius:.375rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}
.border{border:1px solid var(--border)}
.border-2{border:2px solid var(--border)}
.border-t{border-top:1px solid var(--border)}
.border-b{border-bottom:1px solid var(--border)}
.shadow-sm{box-shadow:var(--shadow-sm)}
.shadow-md{box-shadow:var(--shadow-md)}
.shadow-lg{box-shadow:var(--shadow-lg)}
.text-center{text-align:center}
.text-left{text-align:left}
.whitespace-nowrap{white-space:nowrap}
.cursor-pointer{cursor:pointer}
.select-none{user-select:none}
.transition{transition:all var(--transition)}
.opacity-0{opacity:0}
.opacity-100{opacity:1}

/* === BREAKPOINTS === */
@media (min-width:640px){
  .sm\:block{display:block}
  .sm\:inline{display:inline}
  .sm\:flex{display:flex}
  .sm\:grid{display:grid}
  .sm\:hidden{display:none}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:768px){
  .md\:block{display:block}
  .md\:flex{display:flex}
  .md\:grid{display:grid}
  .md\:hidden{display:none}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .lg\:block{display:block}
  .lg\:flex{display:flex}
  .lg\:grid{display:grid}
  .lg\:hidden{display:none}
  .lg\:flex-row{flex-direction:row}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:w-72{width:18rem}
  .lg\:sticky{position:sticky}
  .lg\:top-20{top:5rem}
}
@media (min-width:1280px){
  .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* === ICONS === */
.icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:inline-block;vertical-align:middle}
.icon-sm{width:1rem;height:1rem}
.icon-lg{width:1.5rem;height:1.5rem}
.icon svg{width:100%;height:100%;display:block}