:root {

  --color-primary-dark:   #3e3e48;
  --color-text-secondary: #333333;
  --color-text-tertiary:  #565656;
  --color-border:         #d2d4dd;
  --color-border-input:   #c9c9c9;
  --color-neutral-bg:     #eeeff3;
  --color-table-zebra:    #f6f7fa;
  --color-white:          #ffffff;
  --color-black:          #000000;
  --color-accent:         #ff9b66;
  --color-accent-hover:   #ff7c36;
  --color-accent-blue:    #1f5bff;
  --color-accent-teal:    #46a9b8;
  --color-error:          #ff4a4a;

  --radius-xs:   5px;
  --radius-s:    20px;
  --radius-m:    30px;
  --radius-full: 100px;

  --font-base:    'TildaSans', Arial, sans-serif;
  --font-display: 'PP-Neue-Machina', var(--font-base);

  --fs-2xs: 12px;
  --fs-xs:  14px;
  --fs-s:   16px;
  --fs-m:   18px;
  --fs-l:   24px;
  --fs-xl:  30px;
  --fs-2xl: 40px;
  --fs-3xl: 59px;

  --menu-hover-text-color: var(--color-accent-hover);
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, var(--fs-3xl));
  line-height: 1.25;
  color: var(--color-primary-dark);
  margin: 0 0 20px;
}
h2 {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, var(--fs-2xl));
  line-height: 1.3;
  color: var(--color-primary-dark);
  margin: 0 0 16px;
}
h3 {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, var(--fs-xl));
  line-height: 1.35;
  color: var(--color-primary-dark);
  margin: 0 0 14px;
}
h4, h5, h6 {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: var(--fs-m);
  line-height: 1.4;
  color: var(--color-primary-dark);
  margin: 0 0 12px;
}

p, .t-descr {
  font-family: var(--font-base);
  font-size: var(--fs-s);
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-align: left;
}

.t-btn, .t-submit, input[type="submit"] {
  background-color: var(--color-accent) !important;
  color: var(--color-black) !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-base) !important;
  font-size: var(--fs-s) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background-color .2s ease;
}
.t-btn:hover, .t-submit:hover, input[type="submit"]:hover {
  background-color: var(--color-accent-hover) !important;
}

.t-btn.t-btn_secondary, .t-submit.t-btn_secondary {
  background-color: transparent !important;
  color: var(--color-primary-dark) !important;
  border: 1px solid var(--color-border) !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  border: 1px solid var(--color-border-input) !important;
  border-radius: var(--radius-xs) !important;
  background-color: transparent !important;
  font-family: var(--font-base) !important;
  font-size: var(--fs-s) !important;
  color: var(--color-primary-dark) !important;
  padding: 0 20px !important;
  height: 60px !important;
  box-sizing: border-box !important;
}
textarea {
  height: auto !important;
  min-height: 102px !important;
  padding-top: 17px !important;
}
input::placeholder, textarea::placeholder {
  color: var(--color-text-tertiary) !important;
  opacity: 1;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-primary-dark) !important;
  outline: none;
}

.t-table, table {
  border-collapse: collapse !important;
  width: 100% !important;
}
.t-table th, .t-table__cell_header, table th {
  font-weight: 700 !important;
  background-color: var(--color-neutral-bg) !important;
  color: var(--color-primary-dark) !important;
  text-align: left !important;
}
.t-table td, .t-table th, table td, table th {
  padding: 20px !important;
  border: 1px solid var(--color-border) !important;
  font-size: var(--fs-m) !important;
  color: var(--color-text-secondary);
}
.t-table tr:nth-child(even) td, table tr:nth-child(even) td {
  background-color: var(--color-table-zebra) !important;
}

.t-store__card { transition: box-shadow .2s ease; }
.t-store__card:hover { box-shadow: 0 5px 20px rgba(62, 62, 72, 0.15); }
