/* Load Inter font from rsms.me */
@import url('https://rsms.me/inter/inter.css');

* {
  box-sizing: border-box;
}

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Root font scale */
:root {
  --font-size-xxl: 4rem;
  --font-size-xl: 3rem;
  --font-size-lg: 2rem;
  --font-size-md: 1.5rem;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;
}

/* Responsive font scale overrides */
@media (max-width: 1200px) {
  :root {
    --font-size-xxl: 3.5rem;
    --font-size-xl: 2.5rem;
    --font-size-lg: 1.75rem;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-xxl: 2.5rem;
    --font-size-xl: 2rem;
    --font-size-lg: 1.5rem;
    --font-size-md: 1.25rem;
    --font-size-base: 0.95rem;
    --font-size-sm: 0.8rem;
    --font-size-xs: 0.7rem;
  }
}

/* Typography base styles */
body {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: #000;
  background: #fff;
}

/* Font-size utility classes */
.text-xxl { font-size: var(--font-size-xxl); }
.text-xl  { font-size: var(--font-size-xl); }
.text-lg  { font-size: var(--font-size-lg); }
.text-md  { font-size: var(--font-size-md); }
.text-base { font-size: var(--font-size-base); }
.text-sm  { font-size: var(--font-size-sm); }
.text-xs  { font-size: var(--font-size-xs); }

/* Font-weight utility classes */
.font-light     { font-weight: 300; }
.font-normal    { font-weight: 400; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Grid system */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1200px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col {
  padding: 15px;
  flex: 1;
}

[class*='col-'] {
  padding: 15px;
}

/* Column widths */
.col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Offsets */
.offset-1 { margin-left: 8.3333%; }
.offset-2 { margin-left: 16.6667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.3333%; }
.offset-5 { margin-left: 41.6667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.3333%; }
.offset-8 { margin-left: 66.6667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.3333%; }
.offset-11 { margin-left: 91.6667%; }

/* Alignment utilities */
.align-start     { align-items: flex-start; }
.align-center    { align-items: center; }
.align-end       { align-items: flex-end; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

/* Responsive columns collapse at 768px */
@media (max-width: 768px) {
  .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
  .offset-1, .offset-2, .offset-3, .offset-4, .offset-5,
  .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
  }
}

/* Nesting support */
.row > .col > .row {
  margin-left: -15px;
  margin-right: -15px;
}