/* Tiltshift Base Element Styling */

/* Reset and normalize */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margins and improve text rendering */
* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Body */
body {
  font-family: var(--ts-font-primary);
  font-size: var(--ts-text-md);
  line-height: var(--ts-leading-normal);
  color: var(--ts-color-text);
  background-color: var(--ts-color-white);
  min-height: 100vh;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ts-font-heading);
  font-weight: var(--ts-font-weight-bold);
  color: var(--ts-color-text);
  line-height: var(--ts-leading-tight);
  margin: 0;
}

h1 { 
  font-size: var(--ts-text-2xl);
  margin-bottom: var(--ts-space-4);
}

h2 { 
  font-size: var(--ts-text-xl);
  margin-top: var(--ts-space-8);
  margin-bottom: var(--ts-space-3);
}

h3 { 
  font-size: var(--ts-text-lg);
  margin-bottom: var(--ts-space-3);
}

h4, h5, h6 { 
  margin-bottom: var(--ts-space-2);
}

h4 { 
  font-size: var(--ts-text-md);
}

h5 { 
  font-size: var(--ts-text-sm);
}

h6 { 
  font-size: var(--ts-text-xs);
}

/* Paragraphs */
p {
  font-family: var(--ts-font-primary);
  font-size: var(--ts-text-md);
  line-height: var(--ts-leading-normal);
  margin-bottom: var(--ts-space-3);
}

/* Links */
a {
  color: var(--ts-color-primary-dark);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  text-decoration: underline;
}

a:focus {
  outline: var(--ts-space-0) solid var(--ts-color-primary);
  outline-offset: var(--ts-space-0);
}

/* Lists */
ul, ol {
  font-family: var(--ts-font-primary);
  font-size: var(--ts-text-md);
  line-height: var(--ts-leading-normal);
  margin-bottom: var(--ts-space-3);
  padding-left: var(--ts-space-4);
}

li {
  margin-bottom: var(--ts-space-1);
}

li:last-child {
  margin-bottom: 0;
}

/* Main content container */
main {
  max-width: var(--ts-container-lg);
  margin: 0 auto;
  padding: 0 var(--ts-space-3);
}

/* Main with fixed navigation spacing */
main.with-fixed-nav {
  margin-top: 4rem; /* Standard nav height */
}

@media (min-width: 1024px) {
  main.with-fixed-nav {
    margin-top: var(--ts-nav-height-desktop);
  }
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Code */
code {
  font-family: 'Courier New', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: var(--ts-text-sm);
  background-color: var(--ts-color-off-white);
  padding: var(--ts-space-1) var(--ts-space-2);
  border-radius: var(--ts-radius-sm);
  border: 1px solid var(--ts-color-grey-light);
}

pre {
  font-family: 'Courier New', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: var(--ts-text-sm);
  background-color: var(--ts-color-off-white);
  padding: var(--ts-space-3);
  border-radius: var(--ts-radius-md);
  border: 1px solid var(--ts-color-grey-light);
  overflow-x: auto;
  margin-bottom: var(--ts-space-3);
  line-height: var(--ts-leading-relaxed, 1.6);
}

pre code {
  background: none;
  padding: 0;
  border: none;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--ts-space-4);
  font-family: var(--ts-font-primary);
  font-size: var(--ts-text-md);
}

th, td {
  padding: var(--ts-space-2);
  text-align: left;
  border-bottom: 1px solid var(--ts-color-grey);
}

th {
  font-family: var(--ts-font-heading);
  font-weight: var(--ts-font-weight-bold);
  background-color: var(--ts-color-off-white);
}

/* Form elements */
input, textarea, select {
  font-family: var(--ts-font-primary);
  font-size: var(--ts-text-md);
  line-height: var(--ts-leading-normal);
  padding: var(--ts-space-2);
  border: 1px solid var(--ts-color-grey);
  border-radius: var(--ts-radius-sm);
  background-color: var(--ts-color-white);
  color: var(--ts-color-text);
}

input:focus, textarea:focus, select:focus {
  outline: var(--ts-space-0) solid var(--ts-color-primary);
  outline-offset: var(--ts-space-0);
  border-color: var(--ts-color-primary);
}

/* Responsive containers */
.ts-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ts-space-5);
  padding-right: var(--ts-space-5);
  max-width: var(--ts-container-lg);
}

.ts-container--sm {
  max-width: var(--ts-container-sm);
}

.ts-container--md {
  max-width: var(--ts-container-md);
}

.ts-container--lg {
  max-width: var(--ts-container-lg);
}


/* Mobile responsive adjustments */
@media (max-width: 768px) {
  h1 { font-size: var(--ts-text-xl); }
  h2 { font-size: var(--ts-text-lg); }
  h3 { font-size: var(--ts-text-md); }
  
  body {
    /* margin-top: var(--ts-nav-height-mobile); */
  }
  
  main {
    padding: 0 var(--ts-space-2);
  }
  
  .ts-container {
    padding-left: var(--ts-space-3);
    padding-right: var(--ts-space-3);
  }
  
  /* Better touch targets on mobile */
  input, textarea, select {
    min-height: 2.75rem;
  }
}