/* Base */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;color:#000;background:#fff}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

:root{
  --primary:#FFAC53;
  --black:#000;
  --white:#fff;
  --gray-100:#fafafa;
  --gray-200:#f2f2f2;
  --gray-300:#e6e6e6;
  --gray-400:#efefef;
  --gray-500:#e6e6e6;
  --gray-700:#b0b0b0;
  --red-50:#ffe0e0;
  --red-100:#fee2e2;
  --red-500:#ef4444;
  --red-600:#dc2626;
  --yellow-100:#fef3c7;
  --yellow-500:#f59e0b;
  --blue-100:#dbeafe;
  --blue-500:#3b82f6;
  --green-100:#dcfce7;
  --green-500:#22c55e;
}

/* Layout */
.container{max-width:1166px;margin-left:auto;margin-right:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.main{min-height:60vh}

/* Spacing */
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mt-16{margin-top:4rem}
.gap-4{gap:1rem}

/* Typography */
.text-sm{font-size:.875rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.text-center{text-align:center}

/* Colors */
.text-grayscale-700{color:var(--gray-700)}
.text-primary-1000{color:var(--primary)}
.text-red-600{color:var(--red-600)}
.text-green-700{color:#15803d}
.bg-white{background:#fff}
.bg-red-100{background:var(--red-100)}
.bg-yellow-100{background:var(--yellow-100)}
.bg-blue-100{background:var(--blue-100)}
.bg-green-100{background:var(--green-100)}
.bg-primary-1000{background:var(--primary)}

/* Borders + radius */
.border{border:1px solid #e5e7eb}
.border-grayscale-300{border-color:var(--gray-300)}
.border-grayscale-400{border-color:var(--gray-400)}
.border-red-500{border-color:var(--red-500)}
.border-yellow-500{border-color:var(--yellow-500)}
.border-blue-500{border-color:var(--blue-500)}
.border-green-500{border-color:var(--green-500)}
.rounded-20{border-radius:20px}
.rounded-100{border-radius:100px}
/* Escaped utility used in markup */
.rounded-\[20px\]{border-radius:20px}

/* Shadows */
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.06)}
.box-shadow-default{border-radius:20px;border:1px dashed var(--gray-100);background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* Flex/Grid */
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-row{flex-direction:row}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Lists */
.list-disc{list-style:disc}
.list-decimal{list-style:decimal}
.pl-6{padding-left:1.5rem}
.space-y-2 > * + *{margin-top:.5rem}

/* Links and buttons */
.transition{transition:all .2s ease}
.hover\:underline:hover{text-decoration:underline}
.hover\:opacity-90:hover{opacity:.9}
.hover\:text-primary-1000:hover{color:var(--primary)}

/* Header/Footer */
header a{color:inherit}
footer a{color:var(--primary)}

/* Components */
.button, .btn{display:inline-block;border:none;background:var(--primary);color:#fff;padding:.75rem 1.5rem;border-radius:20px;cursor:pointer}
.button:disabled{opacity:.6;cursor:not-allowed}

/* Utility colors for SVG/text if needed */
.text-blue-500{color:var(--blue-500)}
.text-success-700{color:#22c55e}

/* Helpers */
.hidden{display:none}