/* =========================================================================
   Design System · paste-to-download.com
   Source of truth: /DESIGN.md
   Utility-Modernist (V1 frame) + subtle warmth (V3 blob + hover lift)
   ========================================================================= */

:root {
    --bg: #FAFAF9;
    --surface: #FFFFFF;
    --ink: #0A0A0A;
    --muted: #737373;
    --subtle: #A3A3A3;
    --line: #E5E5E5;
    --line-strong: #D4D4D4;
    --accent: #1A4D3A;
    --accent-hover: #123527;
    --accent-soft: #E8F0EC;
    --blob-green: #D4E5DD;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    --font-display: 'Fraunces', ui-serif, Georgia, serif;
    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    color-scheme: light;
}

[data-theme="dark"] {
    --bg: #0A0A0A;
    --surface: #171717;
    --ink: #FAFAFA;
    --muted: #A3A3A3;
    --subtle: #737373;
    --line: #262626;
    --line-strong: #404040;
    --accent: #2D7A5F;           /* ~15% saturation drop, easier on eyes */
    --accent-hover: #3B9574;
    --accent-soft: #14281F;
    --blob-green: #1F3830;

    color-scheme: dark;
}

body {
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "ss03", "cv11";
    background-color: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Decorative blob (subtle, hero/marketing corners only) ---------- */
.blob {
    position: absolute;
    border-radius: 50%;
    background: var(--blob-green);
    filter: blur(120px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}
.blob-soft { opacity: 0.35; }

/* ---------- Display type helpers ---------- */
.font-display-italic {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: "opsz" 120, "SOFT" 80, "WONK" 1;
}
.font-display-hero {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 120, "SOFT" 30, "WONK" 0;
    letter-spacing: -0.025em;
}

/* ---------- Fluid Typography · hero-scale Fraunces ---------- */
.fluid-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(44px, 7vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-variation-settings: "opsz" 120, "SOFT" 30, "WONK" 0;
}
/* Italic + accent emphasis word inside hero titles */
.fluid-title em,
.font-display em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: "opsz" 120, "SOFT" 80, "WONK" 1;
}
.fluid-paragraph {
    font-size: clamp(0.95rem, 1.5vw, 1.075rem);
    line-height: 1.6;
    color: var(--muted);
}

/* ---------- Drop area states (image upload zone) ---------- */
.drop-area {
    transition: border-color 180ms var(--ease), background-color 180ms var(--ease), transform 180ms var(--ease);
}
.drop-area:hover,
.drop-area.active {
    border-color: var(--accent);
    background-color: var(--accent-soft);
    transform: translateY(-1px);
}

/* ---------- Apple-style transition baseline ---------- */
.transition-all {
    transition-property: all;
    transition-timing-function: var(--ease);
    transition-duration: 180ms;
}

/* ---------- Interactive lift (V3 warmth injection) ---------- */
.lift-on-hover {
    transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.lift-on-hover:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 10, 10, 0.06);
}

/* Primary button accent lift (stronger shadow with accent tint) */
.btn-accent-lift {
    transition: background-color 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.btn-accent-lift:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 77, 58, 0.18);
}

/* Feature row with left accent bar (replaces heavy card style) */
.feat-row {
    border-left: 2px solid var(--line);
    transition: border-left-color 200ms var(--ease), transform 200ms var(--ease);
}
.feat-row:hover {
    border-left-color: var(--accent);
    transform: translateY(-2px);
}

/* ---------- Button tactile press ---------- */
button:active {
    transform: scale(0.98);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .drop-area,
    .drop-area:hover,
    .lift-on-hover:hover,
    .btn-accent-lift:hover,
    .feat-row:hover {
        transform: none;
    }
    .transition-all { transition: none; }
}