/* ==========================================================================
   Landing page design tokens.
   One accent (deep green), one neutral family (warm slate), one radius scale.
   Light is the canonical palette; the dark block only re-points the same
   token names, so no component ever needs a mode-specific rule.
   ========================================================================== */

:root {
    /* Surfaces */
    --bg: #fbfbfa;
    --bg-sunk: #f2f2ef;
    --surface: #ffffff;
    --surface-2: #f7f7f5;

    /* Ink */
    --ink: #14181c;
    --ink-2: #3d454d;
    --ink-3: #515a62;
    --ink-4: #666f77;   /* WCAG AA on every surface it is used on */

    /* Single accent. Used for every interactive and every "with us" state. */
    --accent: #0f7a63;
    --accent-hover: #0b6350;
    --accent-ink: #ffffff;
    --accent-wash: #e8f3ef;
    --accent-line: #bcdcd2;

    /* Lines. Tinted to the surface hue, never pure black. */
    --line: #e4e4df;
    --line-strong: #d2d2cb;

    /* Elevation. Tinted to the background hue, never pure black. */
    --shadow-sm: 0 1px 2px rgba(20, 24, 28, .05);
    --shadow-md: 0 2px 4px rgba(20, 24, 28, .04), 0 12px 28px rgba(20, 24, 28, .07);
    --shadow-lg: 0 4px 8px rgba(20, 24, 28, .05), 0 24px 56px rgba(20, 24, 28, .10);

    /* Shape lock: everything is soft-10, pills are reserved for status chips. */
    --r: 10px;
    --r-lg: 14px;

    /* Rhythm */
    --pad-x: clamp(20px, 5vw, 40px);
    --section-y: clamp(64px, 9vw, 116px);
    --max: 1240px;

    --ease: cubic-bezier(.16, 1, .3, 1);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #101315;
        --bg-sunk: #0b0e0f;
        --surface: #171b1e;
        --surface-2: #1d2225;

        --ink: #f0f1ef;
        --ink-2: #c6cbcd;
        --ink-3: #98a0a4;
        --ink-4: #878f95;

        --accent: #3fb495;
        --accent-hover: #55c7a9;
        --accent-ink: #07211a;
        --accent-wash: #14312a;
        --accent-line: #244d43;

        --line: #262c30;
        --line-strong: #333a3f;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
        --shadow-md: 0 2px 4px rgba(0, 0, 0, .25), 0 12px 28px rgba(0, 0, 0, .38);
        --shadow-lg: 0 4px 8px rgba(0, 0, 0, .3), 0 24px 56px rgba(0, 0, 0, .48);

        color-scheme: dark;
    }
}