/* LinkFlow identity: copper signal on warm paper. Semantic roles only. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --lf-font: "Inter", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif;
    --lf-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;

    --lf-ink: #16181d;
    --lf-ink-soft: #3d3a36;
    --lf-muted: #6f6a63;
    --lf-paper: #f1eee6;
    --lf-surface: #fbfaf6;
    --lf-wash: #e8e4db;
    --lf-line: rgba(22, 24, 29, 0.1);
    --lf-line-strong: rgba(22, 24, 29, 0.18);

    --lf-signal: #c24e1c;
    --lf-signal-hover: #a34116;
    --lf-signal-wash: rgba(194, 78, 28, 0.12);
    --lf-focus: #c24e1c;

    --lf-positive: #2c6a4a;
    --lf-positive-wash: rgba(44, 106, 74, 0.12);
    --lf-warning: #8a6414;
    --lf-warning-wash: rgba(138, 100, 20, 0.14);
    --lf-danger: #b42318;
    --lf-danger-wash: rgba(180, 35, 24, 0.1);

    --lf-text-xs: 0.75rem;
    --lf-text-sm: 0.875rem;
    --lf-text-md: 1rem;
    --lf-text-lg: 1.25rem;
    --lf-text-xl: 1.5rem;
    --lf-text-2xl: 2rem;
    --lf-text-3xl: clamp(2.25rem, 4.5vw, 3.5rem);

    --lf-space-1: 0.25rem;
    --lf-space-2: 0.5rem;
    --lf-space-3: 0.75rem;
    --lf-space-4: 1rem;
    --lf-space-5: 1.5rem;
    --lf-space-6: 2rem;
    --lf-space-8: 3.5rem;
    --lf-space-10: 5rem;
    --lf-space-12: 6rem;
    --lf-space-16: 8rem;

    --lf-radius-sm: 3px;
    --lf-radius-md: 5px;
    --lf-radius-lg: 8px;

    --lf-shadow-sm: 0 1px 2px rgba(22, 24, 29, 0.04);
    --lf-shadow-md: 0 4px 16px -4px rgba(22, 24, 29, 0.08);
    --lf-shadow-lg: 0 24px 48px -28px rgba(22, 24, 29, 0.35);

    --lf-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --lf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --lf-motion: 220ms;
    --lf-motion-slow: 600ms;

    --lf-color-bg: var(--lf-paper);
    --lf-color-surface: var(--lf-surface);
    --lf-color-text: var(--lf-ink);
    --lf-color-text-muted: var(--lf-muted);
    --lf-color-border: var(--lf-line);
    --lf-color-primary: var(--lf-signal);
    --lf-color-primary-hover: var(--lf-signal-hover);
    --lf-color-focus: var(--lf-focus);
    --lf-primary: var(--lf-signal);

    --lf-blue: var(--lf-ink-soft);
    --lf-purple: var(--lf-ink-soft);
    --lf-cyan: var(--lf-ink-soft);
    --lf-green: var(--lf-positive);
    --lf-amber: var(--lf-warning);
    --lf-red: var(--lf-danger);
    --lf-emerald: var(--lf-positive);

    --tblr-primary: #c24e1c;
    --tblr-primary-rgb: 194, 78, 28;
    --tblr-font-sans-serif: var(--lf-font);
    --tblr-body-bg: var(--lf-paper);
    --tblr-body-color: var(--lf-ink);
    --tblr-border-radius: var(--lf-radius-md);
    --tblr-border-radius-sm: var(--lf-radius-sm);
    --tblr-border-radius-lg: var(--lf-radius-lg);
    --tblr-border-radius-pill: var(--lf-radius-md);
    --tblr-border-color: var(--lf-line);
    --tblr-link-color: var(--lf-ink);
    --tblr-link-hover-color: var(--lf-ink);
    --tblr-box-shadow: none;
    --tblr-box-shadow-sm: none;
    --tblr-box-shadow-lg: none;
    --tblr-box-shadow-input: none;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --lf-motion: 0s;
        --lf-motion-slow: 0s;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

:focus-visible {
    outline: 2px solid var(--lf-signal);
    outline-offset: 2px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--lf-font);
    color: var(--lf-ink);
    background: var(--lf-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

code, kbd, pre, .lf-mono {
    font-family: var(--lf-font-mono);
    font-variant-numeric: tabular-nums;
}