$dt-sm: 640px;
$dt-md: 768px;
$dt-lg: 1024px;
$dt-radius-sm: 0.4rem;
$dt-radius-md: 0.6rem;
$dt-radius-xl: 1.2rem;
$dt-radius-2xl: 1.6rem;
$dt-radius-pill: 9999px;
$dt-radius-leaf: 9999px 9999px 9999px 0;
$dt-shadow-soft: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
$dt-shadow-elevated: 0 4px 24px rgba(0,0,0,0.10);

@mixin dt-bp-sm { @media (min-width: $dt-sm) { @content; } }
@mixin dt-bp-md { @media (min-width: $dt-md) { @content; } }
@mixin dt-bp-lg { @media (min-width: $dt-lg) { @content; } }

@mixin dt-icon($path, $size: 2rem) {
  &::before {
    content: "";
    display: inline-block;
    width: $size;
    height: $size;
    -webkit-mask: url($path) no-repeat center / contain;
    mask: url($path) no-repeat center / contain;
    background-color: currentColor;
    flex-shrink: 0;
    vertical-align: middle;
  }
}

@font-face {
  font-family: 'Gill Sans MT';
  src: url('../fonts/GillSansMT.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  font-size: 62.5%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --dt-red: #e30613;
  --dt-red-hover: #c70410;
  --dt-dark: #222221;
  --dt-grey: #666b70;
  --dt-bg: #f2f5f8;
  --dt-surface: #ffffff;
  --dt-border: #dfe3e7;
  --dt-hover-bg: #f4f5f6;
  --dt-row-hover: #e9ecf4;
  --dt-muted-bg: #f8fafc;
  --dt-disabled-bg: #bbbbbb;
  --dt-disabled-color: #999999;
  --dt-font: 'Gill Sans MT', 'Gill Sans', Calibri, Inter, sans-serif;
}

body {
  font-family: var(--dt-font);
  background-color: var(--dt-bg);
  color: var(--dt-dark);
  font-size: 1.6rem;
  line-height: 1.4;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--dt-font);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

p {
  line-height: 1.4;
}

%dt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 2rem;
  border-radius: $dt-radius-leaf;
  background-color: var(--dt-red);
  color: #ffffff;
  font-family: var(--dt-font);
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;

  &:hover,
  &:visited {
    opacity: 0.9;
    color: #ffffff;
    text-decoration: none;
  }
}

%dt-card {
  background-color: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: $dt-radius-2xl;
  box-shadow: $dt-shadow-soft;
  overflow: hidden;
}