/* Artisan Curator - Custom Design System Styles */

/* --- Global Base Styles --- */
body h1 {
    font-family: 'Protest Riot', sans-serif;
    font-size: 5rem;
    /* 80 px */
    line-height: 1;
    color: #212121;
    /* Graphite */
    margin-bottom: 1rem;
}

h2 {
    font-family: 'Protest Riot', sans-serif;
    font-size: 1.75rem;
    /* 28px */
    margin-bottom: 1.5rem;
}

h3 {
    font-family: 'Protest Riot', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

p {
    font-family: 'DM Sans', sans-serif;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

a {
    transition: opacity 0.3s ease;
}

/* Dark mode overrides for base tags */
.dark h1,
.dark h2,
.dark h3,
.dark p {
    color: #FCF9F8;
    /* Off-White */
}

/* --- Specific Components --- */







/* Hand-Drawn Highlights */

.marker-highlight-sage {
    background: linear-gradient(104deg, rgba(100, 112, 93, 0) 0.5%, rgba(100, 112, 93, 0.25) 5%, rgba(100, 112, 93, 0.15) 10%, rgba(100, 112, 93, 0.05) 90%, rgba(100, 112, 93, 0.2) 95%, rgba(100, 112, 93, 0) 99.5%);
    background-color: #DDE3D9;
    color: #212121;
    padding: 4px 6px;
    border-radius: 2.5rem 1.25rem 2.25rem 1.5rem / 1.5rem 2.5rem 1.25rem 2.25rem;
    display: inline-block;
    line-height: 0.9;
}

.marker-highlight-copper {
    background: linear-gradient(104deg, rgba(197, 106, 57, 0) 0.5%, rgba(197, 106, 57, 0.15) 5%, rgba(197, 106, 57, 0.1) 10%, rgba(197, 106, 57, 0.05) 90%, rgba(197, 106, 57, 0.12) 95%, rgba(197, 106, 57, 0) 99.5%);
    background-color: #F8E6DD;
    color: #212121;
    padding: 4px 6px;
    border-radius: 1.5rem 2.25rem 1.25rem 2.5rem / 2.25rem 1.5rem 2.5rem 1.25rem;
    display: inline-block;
    line-height: 0.9;
}

.marker-highlight-linen {
    background: linear-gradient(104deg, rgba(33, 33, 33, 0) 0.5%, rgba(33, 33, 33, 0.05) 5%, rgba(33, 33, 33, 0.02) 10%, rgba(33, 33, 33, 0.03) 90%, rgba(33, 33, 33, 0.05) 95%, rgba(33, 33, 33, 0) 99.5%);
    background-color: #F6F3F2;
    color: #212121;
    padding: 4px 10px;
    border-radius: 2rem 1.5rem 2.5rem 1.25rem / 1.25rem 2.5rem 1.5rem 2rem;
    display: inline-block;
    line-height: 0.9;
}


/* Hand-Drawn Underlines */
.pencil-underline, .artisan-underline {
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 12px;
}

.pencil-underline {
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='20' preserveAspectRatio='none' viewBox='0 0 200 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 14 C 40 16, 70 12, 110 15 C 150 18, 180 14, 198 16' stroke='%23C56A39' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.artisan-underline {
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='20' preserveAspectRatio='none' viewBox='0 0 200 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 14 C 40 16, 70 12, 110 15 C 150 18, 180 14, 198 16' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    opacity: 0.8;
}

.nav-underline {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='10' preserveAspectRatio='none' viewBox='0 0 100 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6 C 25 4, 75 8, 98 5' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom right;
    padding-bottom: 4px;
    background-size: 100% 6px;
    width: fit-content;
    margin-left: auto;
}


/* Shapes & Fills */
.sketch-fill {
    background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(197, 106, 57, 0.1) 2px, rgba(197, 106, 57, 0.1) 4px);
}

.sketch-fill-sage {
    background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(100, 112, 93, 0.15) 2px, rgba(100, 112, 93, 0.15) 4px);
}

.sketch-fill-sand {
    background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(217, 197, 179, 0.2) 2px, rgba(217, 197, 179, 0.2) 4px);
}

.organic-shape-1 {
    border-radius: 2.5rem 1.25rem 2.25rem 1.5rem / 1.5rem 2.5rem 1.25rem 2.25rem;
}

.organic-shape-2 {
    border-radius: 1.5rem 2.5rem 1.25rem 2.25rem / 2.5rem 1.25rem 2.25rem 1.5rem;
}

.organic-shape-3 {
    border-radius: 2.25rem 1.5rem 2.5rem 1.25rem / 1.25rem 2.25rem 1.5rem 2.5rem;
}

/* Felt Tip Accents */
.felt-tip-circle {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 110% 115%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.felt-tip-primary {
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='45' viewBox='0 0 120 45' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,25 C10,35 30,42 60,42 C90,42 110,35 110,25 C110,15 90,5 60,5 C30,5 12,12 11,21 C10.5,30 35,40 75,38' stroke='%23C56A39' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.felt-tip-sage {
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='45' viewBox='0 0 120 45' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M110,20 C110,10 90,3 60,3 C30,3 10,10 10,20 C10,30 30,37 60,37 C90,37 108,31 109,22 C109.5,15 85,7 45,9' stroke='%2364705D' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.felt-tip-copper {
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='45' viewBox='0 0 120 45' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M110,22 C110,32 90,40 60,40 C30,40 8,32 8,22 C8,12 30,4 60,4 C90,4 108,10 109,19 C110,28 85,38 45,36' stroke='%23C56A39' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.felt-tip-graphite {
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='45' viewBox='0 0 120 45' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,22 C10,32 30,40 60,40 C90,40 110,32 110,22 C110,12 90,4 60,4 C30,4 12,10 11,19 C10,28 35,38 75,36' stroke='%23212121' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.felt-tip-sand {
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='45' viewBox='0 0 120 45' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M110,22 C110,32 90,40 60,40 C30,40 8,32 8,22 C8,12 30,4 60,4 C90,4 108,10 109,19 C110,28 85,38 45,36' stroke='%23D9C5B3' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 2rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.btn:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}

.btn-primary {
    background-color: #C56A39;
    /* Copper */
    color: #FCF9F8;
    /* Off-white */
    box-shadow: 0 4px 10px -2px rgba(197, 106, 57, 0.3);
    border-radius: 2.5rem 1.25rem 2.25rem 1.5rem / 1.5rem 2.5rem 1.25rem 2.25rem;
    /* organic-shape-1 */
}

.btn-secondary {
    background-color: #64705D;
    /* Sage */
    color: #FCF9F8;
    border-radius: 1.5rem 2.5rem 1.25rem 2.25rem / 2.5rem 1.25rem 2.25rem 1.5rem;
    /* organic-shape-2 */
}

.btn-tertiary {
    background-color: #D9C5B3;
    /* Sand */
    color: #212121;
    /* Graphite */
    border-radius: 2.25rem 1.5rem 2.5rem 1.25rem / 1.25rem 2.25rem 1.5rem 2.5rem;
    /* organic-shape-3 */
}

/* Icon Buttons specifically */
.btn-icon {
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: none;
}

.btn-icon .ph {
    font-size: 1.5rem;
}

.btn-icon:hover {
    transform: rotate(5deg) scale(1.05);
}

.btn-icon-primary {
    background-color: #C56A39;
    /* Copper */
    color: #FCF9F8;
    /* Off-white */
    border-radius: 2.5rem 1.25rem 2.25rem 1.5rem / 1.5rem 2.5rem 1.25rem 2.25rem;
    box-shadow: 0 4px 10px -2px rgba(197, 106, 57, 0.3);
}

.btn-icon-secondary {
    background-color: #64705D;
    /* Sage */
    color: #FCF9F8;
    border-radius: 1.5rem 2.5rem 1.25rem 2.25rem / 2.5rem 1.25rem 2.25rem 1.5rem;
    box-shadow: 0 4px 10px -2px rgba(100, 112, 93, 0.2);
}

.btn-icon-tertiary {
    background-color: #D9C5B3;
    /* Sand */
    color: #212121;
    /* Graphite */
    border-radius: 2.25rem 1.5rem 2.5rem 1.25rem / 1.25rem 2.25rem 1.5rem 2.5rem;
    box-shadow: 0 4px 10px -2px rgba(217, 197, 179, 0.2);
}

/* --- Documentation Utilities --- */
.code-copy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: #FCF9F8;
    /* off-white */
    border: 1px solid rgba(33, 33, 33, 0.1);
    /* graphite with low alpha */
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.code-copy-row:hover {
    border-color: rgba(197, 106, 57, 0.3);
    /* copper hover */
}

/* Dark mode override for documentation rows */
.dark .code-copy-row {
    background-color: rgba(33, 33, 33, 0.4);
}

.code-snippet {
    font-family: 'Courier Prime', monospace;
    font-size: 10px;
    color: rgba(197, 106, 57, 0.7);
    /* copperish */
    background-color: rgba(197, 106, 57, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.copy-btn {
    opacity: 0;
    transition: all 0.3s ease;
    color: #C56A39;
    /* primary */
    cursor: pointer;
    padding: 0.5rem;
}

.code-copy-row:hover .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    transform: scale(1.1);
}

/* Visualize Spacers in Kitchen Sink */
#layout-spacing .artisan-spacer {
    background: repeating-linear-gradient(
        45deg,
        rgba(197, 106, 57, 0.05),
        rgba(197, 106, 57, 0.05) 10px,
        transparent 10px,
        transparent 20px
    );
    border-top: 1px dashed rgba(197, 106, 57, 0.2);
    border-bottom: 1px dashed rgba(197, 106, 57, 0.2);
    position: relative;
}

#layout-spacing .artisan-spacer::after {
    content: 'Space';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Courier Prime', monospace;
    font-size: 10px;
    color: rgba(197, 106, 57, 0.3);
    pointer-events: none;
}