/* Base Theme Tokens */
:root {
    /* Brand */
    --color-primary: 95, 158, 160; /* Cadet Blue #5F9EA0 */
    --color-primary-light: 127, 180, 182; /* #7FB4B6 */
    --color-primary-dark: 61, 106, 108; /* #3D6A6C */

    --color-accent: 0, 240, 255; /* Electric Blue #00F0FF */
    --color-accent-soft: 153, 248, 251; /* #99F8FB */

    /* States */
    --color-success: 122, 242, 178; /* #7AF2B2 */
    --color-warning: 255, 200, 87;  /* #FFC857 */
    --color-danger: 255, 107, 107;  /* #FF6B6B */

    /* Neutral (Light) */
    --color-surface: 247, 250, 252;  /* #F7FAFC */
    --color-surface-muted: 230, 238, 249; /* #E6EEF9 */
    --color-text: 31, 41, 55; /* #1F2937 */
    --color-heading: 15, 23, 36; /* #0F1724 */

    /* Tokens */
    --radius: 12px;
    --shadow-soft: 0 6px 18px rgba(11,18,32,0.06);
}

/* Dark Theme Overrides */
[data-theme="dark"] {
    /* Neutral */
    --color-surface: 11, 18, 32; /* #0B1220 */
    --color-surface-muted: 31, 41, 55; /* #1F2937 */
    --color-text: 230, 238, 249; /* #E6EEF9 */
    --color-heading: 247, 250, 252; /* #F7FAFC */

    /* Brand tweaks */
    --color-primary: 127, 180, 182; /* lighter cadet for dark */
    --color-accent: 0, 240, 255; /* keep vibrant */

    /* Tokens */
    --shadow-soft: 0 6px 18px rgba(0,0,0,0.4);
}

body {
    font-family: 'Inter', sans-serif;
}

/* Typography for Markdown */
.prose {
    line-height: 1.6;
}
.prose h1, .prose h2, .prose h3 {
    font-weight: 600;
    color: rgb(var(--color-heading));
}
.prose h1 { font-size: 1.5em; margin-bottom: 0.5em; }
.prose h2 { font-size: 1.25em; margin-bottom: 0.4em; }
.prose p { margin-bottom: 1em; }
.prose ul { list-style-type: disc; padding-left: 1.5em; margin-bottom: 1em; }
.prose ol { list-style-type: decimal; padding-left: 1.5em; margin-bottom: 1em; }
.prose a { color: rgb(var(--color-primary-dark)); text-decoration: underline; }
.prose code { 
    background-color: rgb(var(--color-surface-muted)); 
    padding: 0.2em 0.4em; 
    margin: 0; 
    font-size: 85%; 
    border-radius: 6px; 
    font-family: 'Courier New', Courier, monospace;
}
.prose pre {
    background-color: rgb(var(--color-surface-muted));
    padding: 1em;
    border-radius: 8px;
    overflow-x: auto;
}
.prose pre code {
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-size: 100%;
    border-radius: 0;
}

.link-collection-item:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2300F0FF' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5-.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 22px; /* Space for the icon */
}

/* Animation Utilities */
.animate-fade-in {
    animation: fade-in 0.5s ease-out forwards;
}
@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.dragging {
    opacity: 0.5;
    transform: scale(1.05);
}
.copy-success-anim { animation: fade-in-out 1.5s ease-in-out; }
@keyframes fade-in-out {
    0%, 100% { opacity: 0; transform: translateY(5px); }
    20%, 80% { opacity: 1; transform: translateY(0); }
}

/* Range Slider Customization */
input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 8px;
    background: rgb(var(--color-surface));
    border-radius: 5px; outline: none; opacity: 0.7;
    transition: opacity .2s;
}
input[type="range"]:hover { opacity: 1; }
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px;
    background: rgb(var(--color-primary));
    cursor: pointer; border-radius: 50%;
    border: 2px solid rgb(var(--color-surface-muted));
}
input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px;
    background: rgb(var(--color-primary));
    cursor: pointer; border-radius: 50%;
    border: 2px solid rgb(var(--color-surface-muted));
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');