/*
 * CycloScout design system (CYC-22) — implements /DESIGN.md.
 *
 * A white-and-near-black frame where a single emerald green is the only
 * chromatic event: filled CTAs, small "new/premium" pills and focus rings.
 * Buttons are 6px-radius rectangles (never pills), cards are 12px with a 1px
 * hairline, display type is Inter at weight 500 with negative tracking.
 * Inter is the self-hosted stand-in for Circular.
 *
 * Two layers:
 *   1. Tokens + `.ds-*` component classes, used by the restyled templates.
 *   2. Light overrides that bring pages not yet restyled in line: the Tailwind
 *      `brand` palette is emerald (see base.html), so solid brand fills become
 *      the green CTA with near-black text, and brand-coloured *text* becomes ink.
 * Dark-theme counterparts live in dark.css.
 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/inter-latin-wght.woff2") format("woff2");
}

:root {
    --ds-primary: #3ecf8e;
    --ds-primary-deep: #24b47e;
    --ds-ink: #171717;
    --ds-ink-mute: #707070;
    --ds-canvas: #ffffff;
    --ds-canvas-soft: #fafafa;
    --ds-canvas-night: #1c1c1c;
    --ds-hairline: #dfdfdf;
    --ds-hairline-strong: #c7c7c7;
    --ds-hairline-cool: #ededed;
    --ds-font-sans: "Inter", ui-sans-serif, system-ui, "Helvetica Neue", helvetica, arial, sans-serif;
    --ds-font-mono: ui-monospace, menlo, monaco, consolas, "Liberation Mono", monospace;
}

body {
    color: var(--ds-ink);
}

/* ── Typography ───────────────────────────────────────────────────────── */
.ds-display-xl {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
}
.ds-display-lg {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
}
.ds-display-md {
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.ds-headline {
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.2;
}
.ds-subhead {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--ds-ink-mute);
}
/* Small muted helper / caption text. */
.ds-eyebrow {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ds-ink-mute);
}

/* ── Buttons: 6px rectangles, green primary with near-black text ──────── */
.ds-btn-primary,
.ds-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 8px 16px;
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.ds-btn-primary { background: var(--ds-primary); color: var(--ds-ink); }
.ds-btn-primary:hover { background: var(--ds-primary-deep); }
.ds-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.ds-btn-secondary {
    background: var(--ds-canvas);
    color: var(--ds-ink);
    border-color: var(--ds-hairline-strong);
}
.ds-btn-secondary:hover { background: var(--ds-canvas-soft); border-color: var(--ds-ink); }
:where(.ds-btn-primary, .ds-btn-secondary):focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}
/* Larger CTA used in heroes. */
.ds-btn-lg { min-height: 44px; padding: 12px 20px; font-size: 0.9375rem; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.ds-card {
    background: var(--ds-canvas);
    color: var(--ds-ink);
    border: 1px solid var(--ds-hairline);
    border-radius: 12px;
    padding: 32px;
}
/* Inverted feature card. */
.ds-card-dark {
    background: var(--ds-canvas-night);
    color: #fff;
    border: 1px solid var(--ds-canvas-night);
    border-radius: 12px;
    padding: 32px;
}
.ds-tile {
    background: var(--ds-canvas-soft);
    color: var(--ds-ink);
    border: 1px solid var(--ds-hairline-cool);
    border-radius: 12px;
    padding: 24px;
}
/* Square soft icon holder. */
.ds-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--ds-canvas-soft);
    border: 1px solid var(--ds-hairline-cool);
    color: var(--ds-ink);
}
/* Pills: the green "new / premium" tag and the neutral one. */
.ds-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--ds-primary);
    color: var(--ds-ink);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.45;
}
.ds-pill-soft { background: var(--ds-canvas-soft); border: 1px solid var(--ds-hairline-cool); }

/* ── Home hero artwork (CYC-92) ───────────────────────────────────────── */
/* The <picture> swaps the compact phone artwork for the wide one at 768px.
   Width/height attributes on <img> and <source> reserve the box, so the
   page doesn't shift while the WebP loads. */
.hero-stage {
    position: relative;
    max-width: 310px;
    margin: 0 auto;
    --hero-deco-line: #e3e9f0;
}
.hero-art { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
/* Contour rings (and, on desktop, the hill) behind the artwork, faded out
   towards their edges so they never end on a hard line. */
.hero-deco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(closest-side, #000 75%, transparent);
    mask-image: radial-gradient(closest-side, #000 75%, transparent);
}
.hero-deco ellipse { stroke: var(--hero-deco-line); }
/* Desktop ridge under the hero: it sits behind both columns and runs past
   their bottom edge, so only its outline and a fading slope show. */
.hero-hill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -90px;
    width: 100%;
    height: 260px;
    pointer-events: none;
    --hero-deco-hill: #eef2f6;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.hero-hill-stop { stop-color: var(--hero-deco-hill); }
@media (min-width: 768px) {
    .hero-stage { max-width: none; }
    /* The artwork is the right 880/1600 of the canvas's artboard. */
    .hero-deco-wide {
        left: -81.82%;
        width: 181.82%;
        -webkit-mask-image: radial-gradient(farthest-side at 60% 50%, #000 45%, transparent);
        mask-image: radial-gradient(farthest-side at 60% 50%, #000 45%, transparent);
    }
}
/* "Credits" link in the artwork's empty bottom-right corner; the credits
   themselves are at the foot of the page. */
.hero-credits-link {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 4px 6px;
    font-size: 0.6875rem;
    text-decoration: underline;
    color: var(--ds-ink-mute);
}
.hero-credits { color: var(--ds-ink-mute); }
/* Tighter upload card on phones so it reaches the first screen under the hero. */
@media (max-width: 767px) {
    .home-upload-card { padding: 14px; }
    /* A notch smaller than .ds-subhead: three lines instead of four on a
       375px phone, so the upload card's buttons reach the first screen. */
    .home-hero-text { font-size: 1rem; line-height: 1.5; }
}
/* The upload card's buttons stay hidden until a file is chosen; [hidden]
   must beat the .ds-btn-* display. */
.home-upload-card [hidden] { display: none; }

/* ── Top nav ──────────────────────────────────────────────────────────── */
.ds-nav {
    background: var(--ds-canvas);
    color: var(--ds-ink);
    border-bottom: 1px solid var(--ds-hairline);
}
.ds-nav a:not(.ds-btn-primary):not(.ds-btn-secondary),
.ds-nav button { transition: opacity .15s; }
.ds-nav a:not(.ds-btn-primary):not(.ds-btn-secondary):hover,
.ds-nav button:hover { opacity: .6; }
.ds-nav-sep { color: var(--ds-hairline); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.ds-footer {
    background: var(--ds-canvas);
    color: var(--ds-ink-mute);
    border-top: 1px solid var(--ds-hairline);
}

/* ── Light overrides for pages not yet restyled ───────────────────────── */
html:not(.dark) body { background-color: var(--ds-canvas); }

/* Solid brand fills are the green CTA: near-black text, 6px radius. */
html :is(button, a, input[type="submit"]).bg-brand-600 {
    color: var(--ds-ink);
    border-radius: 6px;
    font-weight: 500;
}
html :is(button, a, input[type="submit"]).bg-brand-600:hover { background-color: var(--ds-primary-deep); }
/* Green is a fill, never a text colour (it fails contrast on white): brand
   text and links read as ink. */
html .text-brand-500,
html .text-brand-600,
html .text-brand-700,
html .text-brand-800,
html .text-brand-900,
html .hover\:text-brand-600:hover,
html .hover\:text-brand-700:hover,
html .hover\:text-brand-800:hover { color: var(--ds-ink); }
html .text-brand-400 { color: var(--ds-ink-mute); }

/* Cards step to the 12px card radius. */
html .rounded-2xl { border-radius: 12px; }
html :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea).rounded-lg {
    border-radius: 6px;
}