/* Kaymak Digital — дизайн-токены. Единственный источник цветов, шрифтов, материалов и движения. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@300;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap");

:root {
  /* Основа */
  --k-red: #E5141B;
  --k-red-deep: #B20D14;
  --k-wine: #7A0A12;
  --k-cream: #FFF6E9;
  --k-butter: #F3DDBC;
  --k-ink: #1C0A0B;
  --k-white: #FFFFFF;

  /* Дополнительные — «Ягоды со сливками»: категории, графики, иллюстрации, соцсети */
  --k-strawberry: #FF9AA2;
  --k-cherry: #C2185B;
  --k-blueberry: #4B2D6B;
  --k-pistachio: #B9CF8A;
  --k-peach: #FFD7A8;

  /* Порядок серий в графиках (красный и вишня не соседствуют) */
  --k-chart-1: var(--k-red);
  --k-chart-2: var(--k-blueberry);
  --k-chart-3: var(--k-strawberry);
  --k-chart-4: var(--k-pistachio);
  --k-chart-5: var(--k-peach);
  --k-chart-6: var(--k-cherry);

  /* Шрифты */
  --k-font-display: "Montserrat Alternates", system-ui, sans-serif; /* есть кыргызские ң ө ү */
  --k-font-text: "Onest", system-ui, sans-serif;

  /* Форма */
  --k-r-pill: 999px;
  --k-r-card: 28px;
  --k-r-md: 18px;
  --k-r-sm: 12px;

  /* Материалы: лёгкий реализм. Свет сверху слева. На красном — без бликов. */
  --k-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --k-mat-red: radial-gradient(120% 100% at 15% 8%, rgb(236 42 48) 0%, var(--k-red) 45%, rgb(201 16 26) 100%);
  --k-mat-wine: radial-gradient(120% 100% at 15% 8%, rgb(138 16 24) 0%, var(--k-wine) 55%, rgb(94 7 14) 100%);
  --k-mat-blueberry: radial-gradient(120% 100% at 15% 8%, rgb(90 56 128) 0%, var(--k-blueberry) 60%, rgb(58 33 86) 100%);
  --k-mat-cream: linear-gradient(170deg, rgb(255 251 244) 0%, var(--k-cream) 45%, rgb(247 230 204) 100%);
  --k-mat-sphere: radial-gradient(circle at 34% 30%, var(--k-white) 0, var(--k-cream) 34%, var(--k-butter) 78%, rgb(216 185 142) 100%);

  /* Тени: тёплые, двухслойные */
  --k-shadow-contact: 0 2px 3px rgb(122 10 18 / .22);
  --k-shadow-ambient: 0 22px 44px -16px rgb(122 10 18 / .38);
  --k-shadow-red: 0 10px 22px -6px rgb(178 13 20 / .45);
  --k-shadow-cream: 0 10px 22px -6px rgb(60 0 0 / .3);
  --k-shadow-card: var(--k-shadow-contact), var(--k-shadow-ambient);

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

  /* Движение */
  --k-ease-spring: cubic-bezier(.34, 1.8, .5, 1);
  --k-ease-viscous: cubic-bezier(.22, 1.25, .36, 1);
  --k-ease-pen: cubic-bezier(.45, .05, .4, 1);
  --k-dur-fast: 200ms;
  --k-dur-base: 500ms;
  --k-dur-drip: 1200ms;
  --k-dur-logo: 3000ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --k-dur-base: 1ms; --k-dur-drip: 1ms; --k-dur-logo: 1ms; }
}

/* Утилиты материалов */
.k-mat-red { background: var(--k-mat-red); color: var(--k-cream); }
.k-mat-wine { background: var(--k-mat-wine); color: var(--k-cream); }
.k-mat-blueberry { background: var(--k-mat-blueberry); color: var(--k-cream); }
.k-mat-cream { background: var(--k-mat-cream); color: var(--k-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), inset 0 -10px 24px rgb(178 120 60 / .10); }
.k-grain { position: relative; isolation: isolate; }
.k-grain::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--k-grain); opacity: .09; pointer-events: none; }
.k-sphere { border-radius: 50%; background: var(--k-mat-sphere); box-shadow: inset -.12em -.18em .3em rgb(178 120 60 / .35), var(--k-shadow-contact), 0 .4em .7em -.2em rgb(122 10 18 / .45); }

/* Типографика */
.k-display, .k-h1, .k-h2, .k-h3, .k-num { font-family: var(--k-font-display); margin: 0; }
.k-display { font-weight: 800; font-size: 96px; line-height: .98; letter-spacing: -.035em; }
.k-h1 { font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -.03em; }
.k-h2 { font-weight: 800; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; }
.k-h3 { font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -.01em; }
.k-num { font-weight: 800; font-size: 72px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.k-lead { font-family: var(--k-font-text); font-weight: 500; font-size: 20px; line-height: 1.5; }
.k-body { font-family: var(--k-font-text); font-weight: 400; font-size: 17px; line-height: 1.6; }
.k-small { font-family: var(--k-font-text); font-weight: 400; font-size: 14px; line-height: 1.5; }
.k-eyebrow { font-family: var(--k-font-text); font-weight: 700; font-size: 12px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 640px) {
  .k-display { font-size: 48px; }
  .k-h1 { font-size: 36px; }
  .k-h2 { font-size: 28px; }
  .k-h3 { font-size: 22px; }
  .k-num { font-size: 44px; }
  .k-lead { font-size: 18px; }
  .k-body { font-size: 16px; }
}

/* Только для скринридеров */
.k-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Ткани: орнамент поверх фона блока. <section class="k-mat-red k-fabric" data-fabric="jacquard|cream|shyrdak|stitch">
   jacquard/cream/shyrdak — маски (multiply), stitch — кремовая вышивка обычным слоем. */
.k-fabric { position: relative; isolation: isolate; --k-fabric: url("../assets/patterns/fabric-red.svg"); --k-fabric-opacity: .6; }
.k-fabric::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: var(--k-fabric) center / cover no-repeat; mix-blend-mode: multiply; opacity: var(--k-fabric-opacity); }
.k-fabric[data-fabric="cream"]   { --k-fabric: url("../assets/patterns/fabric-cream.svg"); --k-fabric-opacity: .7; }
.k-fabric[data-fabric="shyrdak"] { --k-fabric: url("../assets/patterns/fabric-shyrdak.svg"); --k-fabric-opacity: .5; }
.k-fabric[data-fabric="stitch"]  { --k-fabric: url("../assets/patterns/fabric-stitch.svg"); --k-fabric-opacity: .45; }
.k-fabric[data-fabric="stitch"]::before { mix-blend-mode: normal; }