/* ===== Preflight / Reset ===== */
*, *::before, *::after {
    box-sizing: border-box;
    border: 0 solid;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    line-height: inherit;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

p {
    margin: 0;
}

ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
    margin: 0;
    border: 0;
    cursor: pointer;
}

input {
    font: inherit;
    color: inherit;
    border: 0;
    padding: 0;
    margin: 0;
}

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

code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
}

a {
    color: inherit;
    text-decoration: inherit;
}

/* ===== Layout / Sizing ===== */
.max-w-6xl  { max-width: 72rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-2xl  { max-width: 42rem; }

.w-full        { width: 100%; }
.w-\[8rem\]   { width: 8rem; }
.w-\[10rem\]  { width: 10rem; }

.h-14         { height: 3.5rem; }
.h-20         { height: 5rem; }
.h-32         { height: 8rem; }
.h-\[10rem\]  { height: 10rem; }

.aspect-square { aspect-ratio: 1 / 1; }

/* ===== Margin ===== */
.mx-auto { margin-left: auto; margin-right: auto; }

.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-16 { margin-top: 4rem; }
.mt-20 { margin-top: 5rem; }

.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }

/* ===== Padding ===== */
.px-1 { padding-left: 0.25rem;  padding-right: 0.25rem;  }
.px-3 { padding-left: 0.75rem;  padding-right: 0.75rem;  }
.px-4 { padding-left: 1rem;     padding-right: 1rem;     }
.px-5 { padding-left: 1.25rem;  padding-right: 1.25rem;  }

.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem;  padding-bottom: 0.5rem;  }

/* ===== Display & Flex ===== */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.hidden         { display: none; }

.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-5  { gap: 1.25rem; }
.gap-10 { gap: 2.5rem; }

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* ===== Position ===== */
.fixed    { position: fixed; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }
.z-10     { z-index: 10; }

/* ===== Typography ===== */
.text-center { text-align: center; }

.text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
.text-2xl { font-size: 1.5rem;   line-height: 2rem;    }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

.font-mono     { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                 Consolas, "Liberation Mono", monospace; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.list-decimal { list-style-type: decimal; }
.list-inside  { list-style-position: inside; }

/* ===== Colors – text ===== */
.text-white          { color: #ffffff; }
.text-blue-500       { color: #3b82f6; }
.text-gray-600       { color: #4b5563; }
.text-gray-700       { color: #374151; }
.text-gray-800       { color: #1f2937; }
.text-\[\#f1c40f\]   { color: #f1c40f; }

/* ===== Colors – background ===== */
.bg-white            { background-color: #ffffff; }
.bg-gray-200         { background-color: #e5e7eb; }
.bg-\[\#ecf0f1\]     { background-color: #ecf0f1; }
.bg-\[\#2c3e50\]     { background-color: #2c3e50; }
.bg-\[\#1abc9c\]     { background-color: #1abc9c; }

/* ===== Borders ===== */
.rounded     { border-radius: 0.25rem; }
.rounded-lg  { border-radius: 0.5rem;  }
.rounded-xl  { border-radius: 0.75rem; }

/* ===== Effects ===== */
.shadow-sm    { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.ring-0       { box-shadow: 0 0 #0000; }
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.cursor-pointer { cursor: pointer; }

/* ===== Hover ===== */
.hover\:underline:hover { text-decoration: underline; }

/* ===== Responsive: md (>=768px) ===== */
@media (min-width: 768px) {
    .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

/* ===== Project-specific custom rules ===== */
button[disabled] {
    background-color: gray;
    cursor: not-allowed;
}

#color-preview,
#real-color-preview {
    background-color: #000;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}