@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Exo+2:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

body {
  background: #050505;
}

@theme {
  /* Base */
  --color-base-white: #fcfcfc;
  --color-base-black: #050505;

  /* Grey Neutral */
  --color-grey-50: #f5f3f2;
  --color-grey-100: #d6d2ce;
  --color-grey-200: #b8b7b5;
  --color-grey-300: #949392;
  --color-grey-400: #7a7a78;
  --color-grey-500: #656564;
  --color-grey-600: #474746;
  --color-grey-700: #353332;
  --color-grey-800: #202928;
  --color-grey-900: #1a1b18;

  /* Additional (Beige + Brown) */
  --color-beige-50: #f6ece5;
  --color-beige-100: #f2dfd9;
  --color-beige-200: #d8c8cc;
  --color-beige-300: #e5c5b2;
  --color-beige-400: #dcb199;
  --color-beige-500: #c3967f;
  --color-beige-600: #af8268;
  --color-beige-700: #8d6951;
  --color-beige-800: #674a39;
  --color-brown: #2f2d2a;

  /* Functional */
  --color-func-orange-main: #f69445;
  --color-func-orange-light: #f4cfcf;

  --color-func-blue-main: #4576fb;
  --color-func-blue-light: #d5d9f8;

  --color-func-green-main: #28b585;
  --color-func-green-light: #c2eddc;

  --color-func-red-main: #e04353;
  --color-func-red-light: #f5e1e3;

  /* Transparent */
  --color-transparent-beige: #d6d0ca24;
  --color-transparent-brown-40: rgba(34, 29, 26, 0.4);
  --color-transparent-grey-40: rgba(41, 40, 40, 0.48);
  --color-transparent-black-78: rgba(5, 5, 5, 0.78);
  --color-transparent-white-20: rgba(252, 252, 252, 0.2);
  --color-transparent-white-8: rgba(252, 252, 252, 0.08);
  --color-transparent-beige-14: rgba(214, 208, 202, 0.14);
  --color-transparent-black-10: #0505051A;
  
  --breakpoint-mobile: 400px;
  --breakpoint-tablet: 744px;
  --breakpoint-xl: 900px;
  --breakpoint-xxl: 1184px;

  --font-inter: 'Inter', sans-serif;
  --font-archivo: 'Archivo', sans-serif;

  /* Shadows */
  --shadow-dark-2px: 0px 0px 0px 2px #f6ece55c;
}

@utility box {
  @apply max-w-[1184px] w-full mx-auto;
}

@utility container-padding {
  @apply px-4 tablet:px-10 xxl:px-0;
}

@utility flex-center {
  @apply flex justify-center items-center;
}

@utility absolute-y-center {
  @apply top-[50%] -translate-y-[50%];
}

/* === HEADLINES — Font: Archivo === */
@utility h1 {
  @apply font-archivo font-semibold text-[56px] leading-[110%];
}

@utility h2 {
  @apply font-archivo font-semibold text-[48px] leading-[110%];
}

@utility h3 {
  @apply font-archivo font-semibold text-[40px] leading-[120%];
}

@utility h3-medium {
  @apply font-archivo font-medium text-[40px] leading-[120%];
}

@utility h4 {
  @apply font-archivo font-semibold text-[32px] leading-[120%];
}

@utility h4-medium {
  @apply h4 font-medium;
}

@utility subheadline {
  @apply font-archivo text-[24px] leading-[120%];
}

@utility subheadline-semibold {
  @apply font-archivo font-semibold text-[24px] leading-[120%];
}

@utility subheadline-medium {
  @apply subheadline font-medium;
}

/* === BODY — Font: Inter === */
@utility b1-semibold {
  @apply font-inter font-semibold text-[20px] leading-[128%];
}
@utility b1-medium {
  @apply font-inter font-medium text-[20px] leading-[128%];
}
@utility b1-regular {
  @apply font-inter font-normal text-[20px] leading-[128%];
}

@utility b2-semibold {
  @apply font-inter font-semibold text-[18px] leading-[130%];
}
@utility b2-medium {
  @apply font-inter font-medium text-[18px] leading-[130%];
}
@utility b2-regular {
  @apply font-inter font-normal text-[18px] leading-[130%];
}

@utility b3-semibold {
  @apply font-inter font-semibold text-[16px] leading-[140%];
}
@utility b3-medium {
  @apply font-inter font-medium text-[16px] leading-[140%];
}
@utility b3-regular {
  @apply font-inter font-normal text-[16px] leading-[140%];
}

/* === LABELS === */
@utility label-large-semibold {
  @apply font-inter font-semibold text-[16px] leading-[124%];
}
@utility label-large-medium {
  @apply font-inter font-medium text-[16px] leading-[124%];
}
@utility label-large-regular {
  @apply font-inter font-normal text-[16px] leading-[124%];
}

@utility label-medium-semibold {
  @apply font-inter font-semibold text-[14px] leading-[130%];
}
@utility label-medium-medium {
  @apply font-inter font-medium text-[14px] leading-[130%];
}
@utility label-medium-regular {
  @apply font-inter font-normal text-[14px] leading-[130%];
}

/* === BUTTONS === */
@utility button-large-semibold {
  @apply font-inter font-semibold text-[18px] leading-[102%];
}
@utility button-large-medium {
  @apply font-inter font-medium text-[18px] leading-[102%];
}
@utility button-large-regular {
  @apply font-inter font-normal text-[18px] leading-[102%];
}

@utility button-small-semibold {
  @apply font-inter font-semibold text-[16px] leading-[116%];
}
@utility button-small-medium {
  @apply font-inter font-medium text-[16px] leading-[116%];
}
@utility button-small-regular {
  @apply font-inter font-normal text-[16px] leading-[116%];
}

/* === CAPTION === */
@utility caption-medium-semibold {
  @apply font-inter font-semibold text-[14px] leading-[130%];
}
@utility caption-medium-medium {
  @apply font-inter font-medium text-[14px] leading-[130%];
}
@utility caption-medium-regular {
  @apply font-inter font-normal text-[14px] leading-[130%];
}

/* Button sizes */

/* === LINKS === */
@utility link-medium {
  @apply font-inter font-medium text-[16px] leading-[140%];
}

@utility link-small {
  @apply font-inter font-medium text-[14px] leading-[140%];
}

@utility btn-lg {
  @apply h-12 px-6 rounded-[8px] button-large-medium;
}

@utility btn-md {
  @apply h-10 px-6 rounded-[8px] button-large-medium;
}

@utility btn-sm {
  @apply h-8 px-4 rounded-[6px] button-small-medium;
}

@utility icon-btn-lg {
  @apply h-12 px-3 rounded-[8px] button-large-medium;
}

@utility icon-btn-md {
  @apply h-10 px-2 rounded-[8px] button-large-medium;
}

@utility icon-btn-sm {
  @apply h-8 px-1 rounded-[8px] button-small-medium;
}

@utility btn-link-lg {
  @apply h-12 px-0 rounded-[0px] button-large-medium;
}

@utility btn-link-md {
  @apply h-10 px-0 rounded-[0px] button-small-medium;
}

@utility btn-link-sm {
  @apply h-8 px-0 rounded-[0px] label-medium-medium;
}

/* Button sizes */

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.gradient-border {
  position: relative;
  z-index: 0;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px; /* Толщина рамки */
  /* background: linear-gradient(158.29deg, rgba(255,255,255,0.4) 12.58%, rgba(255,255,255,0) 84.1%); */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.gradient-border--white::before {
  background: linear-gradient(
    158.29deg,
    rgba(255, 255, 255, 0.4) 12.58%,
    rgba(255, 255, 255, 0) 84.1%
  );
}

.gradient-border--grey::before {
  background: linear-gradient(91.06deg, #3b3b3b 0%, rgba(59, 59, 59, 0) 100%);
}

.gradient-border--white-light::before {
  background: linear-gradient(
    159.36deg,
    rgba(255, 255, 255, 0.4) -54.3%,
    rgba(255, 255, 255, 0) 84.73%
  );
}

/* Показывать скроллбар только при прокрутке, сделать его видимым */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #d6d2ce #232323;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #d6d2ce;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #232323;
}

.rich-text {
  color: #d6d2ce;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 128%;
}

.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
  color: #fcfcfc;
  font-family: Archivo, sans-serif;
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  margin: 1em 0 0.5em;
}

.rich-text h1 {
  font-size: 56px;
}
.rich-text h2 {
  font-size: 48px;
}
.rich-text h3 {
  font-size: 40px;
}
.rich-text h4 {
  font-size: 32px;
}
.rich-text h5 {
  font-size: 26px;
}
.rich-text h6 {
  font-size: 22px;
}

.rich-text p {
  margin: 0.75em 0;
}

.rich-text ul,
.rich-text ol {
  padding-left: 1.5em;
  margin: 1em 0;
  color: #ffffff;
  list-style-position: outside;
}

.rich-text ul {
  list-style-type: disc;
}

.rich-text ol {
  list-style-type: decimal;
}

.rich-text li {
  margin: 0.3em 0;
}

.rich-text img {
  width: 100%;
  height: auto;
  display: block;
  margin: 1.5em 0;
}
/* used for solve issue with scrollbar in windows + chrome */
html {
  scrollbar-gutter: stable;
}
html body[data-scroll-locked] {
  --removed-body-scroll-bar-size: 0 !important;
  margin-right: 0 !important;
}
