/* ============================================================
   DESIGN TOKENS — общие токены
   ============================================================ */

@font-face {
  font-family: "TT Prosto Sans";
  font-style: normal;
    src: url('/imgs/2020/fonts/TT-Prosto-Sans-Regular.otf');
}

:root {
  /* Border Radius */
  --radius-pill: 50px;
  --radius-medium: 16px;
  --radius-medium_negative: -16px;
  --radius-small: 8px;
  --radius-bar: 24px;

  /* Spacing */
  --space-4: 8px;
  --space-8: 16px;
  --space-10: 20px;

  /* Surface */
  --surface-card: #ffffff;
  --surface-chip-active: #72798c;
  --surface-chip-default: #d9e1e7;

  /* Brand */
  --brand-primary: #ed1d51;
  --brand-dark: #09034b;

  /* Text */
  --text-primary: #09034b;
  --text-secondary: #aeacc4;
  --text-tertiary: #c0c0c0;
  --text-white: #ffffff;

  /* Status */
  --status-success-bg: #9ef0bf;
  --status-success-text: #059669;
  --status-danger-bg: #fde8ed;
  --status-warning-bg: #fff0ae;
  --status-warning-text: #786600;
  --status-confirm-bg: #cfd8ff;

  /* Icon background */
  --icon-bg: #f5f6fa;

  /* Font */
  --font-main: 'TT Prosto Sans', sans-serif;
}

/* ============================================================
   BASE RESET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-main); color: var(--text-primary); }
p { margin: 0; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-main); }
img { display: block; }

/* ============================================================
   KIT PAGE LAYOUT
   ============================================================ */

.kit-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.kit-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kit-section__title {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 18px;
  line-height: normal;
  color: var(--text-primary);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--surface-chip-default);
}

.kit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.kit-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================================
   TYPOGRAPHY UTILITY CLASSES
   ============================================================ */

.type-h1 {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
}

.type-h2 {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 18px;
  line-height: normal;
}

.type-h3 {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
}

.type-body-bold {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
}

.type-body-secondary {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
}

.type-body-tertiary {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
}

.type-button-bold {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 15px;
  line-height: normal;
}

.type-label-tiny {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 10px;
  line-height: normal;
  text-transform: uppercase;
}

/* Color utilities */
.text-primary        { color: var(--text-primary); }
.text-secondary      { color: var(--text-secondary); }
.text-tertiary       { color: var(--text-tertiary); }
.text-white          { color: var(--text-white); }
.text-success        { color: var(--status-success-text); }
.text-warning        { color: var(--status-warning-text); }
.text-brand-primary  { color: var(--brand-primary); }

/* ============================================================
   ICON CONTAINER (reusable)
   ============================================================ */

.icon-container {
  position: relative;
  flex-shrink: 0;
  display: block;
}

.icon-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  top: 0;
  left: 0;
}


/* ============================================================
   BIG BUTTON ICON (inside button)
   ============================================================ */

.big-btn-icon {
  width: 22px;
  height: 22px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.big-btn-icon img {
  position: absolute;
  object-fit: contain;
}

/* ============================================================
   BIG BUTTONS
   ============================================================ */

.big-button {
  display: inline-flex;
  gap: 6px;
  height: 50px;
  width: 353px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: var(--radius-pill);
}

.big-button--primary   { background: var(--brand-dark); }
.big-button--secondary { background: var(--surface-chip-default); }
.big-button--action    { background: var(--brand-primary); }

.big-button--primary span,
.big-button--action span  { color: var(--text-white); }
.big-button--secondary span { color: var(--text-primary); }

/* Full-width variant (inside RecordCard) */
.big-button--full { width: 100%; }














/* ============================================================
   TYPOGRAPHY SHOWCASE
   ============================================================ */

.typography-showcase {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.type-sample {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface-card);
  padding: 20px;
  border-radius: var(--radius-medium);
  min-width: 200px;
}

.type-sample p { color: var(--text-primary); }






/* ============================================================
   KIT SUBSECTION TITLE
   ============================================================ */

.kit-subsection__title {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  color: var(--text-secondary);
}

/* ============================================================
   COMPONENT PREVIEW (isolated component pages)
   ============================================================ */

.component-preview {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icon-bg);
  padding: 40px;
}