/* ============================================
   EVERMORE LINE COMPONENT — VARIANTS
============================================ */

/* Thin line (default is medium) */
.line-thin {
    height: 1px;
    background: var(--ink-200);
    opacity: 0.8;
}

/* Medium (same as .line but explicit) */
.line-md {
    height: 2px;
    background: var(--ink-300);
}

/* Thick line */
.line-thick {
    height: 4px;
    background: var(--ink-400);
}

/* Dotted line */
.line-dotted {
    border: none;
    border-top: 2px dotted var(--ink-300);
    height: 0;
    background: none;
}

/* Subtle faded line (nice for separating paragraphs) */
.line-faded {
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--ink-200),
        transparent
    );
}

/* Full gradient line (Evermore brand flavor) */
.line-gradient {
    height: 3px;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--brand-300),
        var(--brand-500),
        var(--brand-300)
    );
}

/* Double line */
.line-double {
    border: none;
    height: 5px;
    background:
        linear-gradient(var(--ink-300), var(--ink-300)) top,
        linear-gradient(var(--ink-300), var(--ink-300)) bottom;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    padding: 3px 0; /* space between lines */
}