/* Soft Invoice Maker — design tokens & bespoke styling
   Palette: Ledger Ink (#0B1220), Paper (#F7F5EE), Emerald (#0EA968),
            Emerald Deep (#065F46), Slate (#475467), Amber stamp (#D4A72C)
   Type: "Fraunces" (display serif, ledger character) + "Inter" (body) + "IBM Plex Mono" (data/figures)
*/

:root {
    --ink: #0B1220;
    --ink-soft: #131C2E;
    --paper: #F7F5EE;
    --paper-dim: #EFEBDF;
    --emerald: #0EA968;
    --emerald-deep: #065F46;
    --emerald-light: #E4F5EC;
    --slate: #475467;
    --slate-light: #8A93A6;
    --amber: #D4A72C;
    --line: #E3E1D6;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.font-display {
    font-family: 'Fraunces', ui-serif, Georgia, serif;
}

.font-mono {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Perforated / ledger edge motif */
.perf-edge {
    position: relative;
}

.perf-edge::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 14px;
    background-image: radial-gradient(circle at 10px 7px, var(--paper) 6px, transparent 6.5px);
    background-size: 20px 14px;
    background-repeat: repeat-x;
    transform: translateY(-100%);
}

.paper-texture {
    background-color: var(--paper);
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px);
    background-size: 100% 2rem;
}

.ink-grid {
    background-image:
        linear-gradient(rgba(247, 245, 238, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(247, 245, 238, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
}

.stamp {
    transform: rotate(-8deg);
    border: 2.5px solid var(--emerald);
    color: var(--emerald);
}

.tick-rule {
    background-image: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
    height: 1px;
}

.card-shadow {
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 20px 40px -18px rgba(11, 18, 32, 0.25);
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

::selection {
    background: var(--emerald);
    color: var(--paper);
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -4px;
    height: 1.5px;
    background: var(--emerald);
    transition: right .25s ease;
}

.nav-link:hover::after {
    right: 0;
}

.btn-primary {
    background: var(--ink);
    color: var(--paper);
    transition: transform .2s ease, background .2s ease;
}

.btn-primary:hover {
    background: var(--emerald-deep);
    transform: translateY(-2px);
}

.btn-ghost {
    border: 1.5px solid var(--ink);
    color: var(--ink);
    transition: all .2s ease;
}

.btn-ghost:hover {
    background: var(--ink);
    color: var(--paper);
}

.feature-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    border: 1px solid var(--line);
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--emerald);
    box-shadow: 0 20px 40px -20px rgba(11, 18, 32, 0.22);
}

.phone-frame {
    border-radius: 2.5rem;
    border: 8px solid var(--ink);
    box-shadow: 0 30px 60px -25px rgba(11, 18, 32, 0.45);
    background: var(--ink);
}

/* mock invoice hero animation */
.line-item {
    opacity: 0;
    animation: lineIn .5s ease forwards;
}

@keyframes lineIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.draw-underline {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: draw 1.8s ease forwards 0.4s;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

.total-count {
    animation: pop .4s ease forwards 1.6s;
    opacity: 0;
}

@keyframes pop {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .line-item,
    .draw-underline,
    .total-count {
        animation: none;
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

.marquee-track {
    animation: marquee 28s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.faq-icon {
    transition: transform .3s ease;
}

.faq-open .faq-icon {
    transform: rotate(45deg);
}

.faq-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--emerald);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--emerald);
    outline-offset: 2px;
}