/* =========================================================
   Design tokens — Финансовый протокол
   Stripe/Linear minimal fintech palette
   ========================================================= */

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

:root {
    color-scheme: light dark;

    /* Backgrounds */
    --bg:           #FFFFFF;
    --surface:      #FAFAFA;
    --surface-2:    #F4F4F5;

    /* Borders */
    --border:       #E4E4E7;
    --border-strong:#A1A1AA;

    /* Text */
    --text:         #09090B;
    --text-muted:   #71717A;
    --text-faint:   #A1A1AA;

    /* Semantic colors */
    --green:        #16A34A;
    --red:          #DC2626;

    /* Legacy aliases — referenced in app.js inline styles */
    --muted:        var(--text-muted);
    --paper:        var(--bg);
    --ink:          var(--text);

    /* Hover / interactive */
    --hover:        #F4F4F5;
    --hover-strong: #E4E4E7;

    /* Type scale */
    --fs-micro:   0.6875rem;  /* 11px */
    --fs-sm:      0.8125rem;  /* 13px */
    --fs-body:    0.9375rem;  /* 15px */
    --fs-md:      1rem;       /* 16px */
    --fs-lg:      1.25rem;    /* 20px */
    --fs-xl:      1.75rem;    /* 28px */
    --fs-display: 2.5rem;     /* 40px */

    /* Spacing — 4pt grid */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    /* Border radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-full: 999px;

    /* Motion */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-io:  cubic-bezier(.77, 0, .175, 1);
    --dur-fast: 140ms;
    --dur-med:  260ms;
    --dur-slow: 440ms;

    /* Type families */
    --ff-ui:   "Geist", system-ui, -apple-system, sans-serif;
    --ff-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:           #09090B;
        --surface:      #18181B;
        --surface-2:    #27272A;
        --border:       #27272A;
        --border-strong:#52525B;
        --text:         #FAFAFA;
        --text-muted:   #A1A1AA;
        --text-faint:   #52525B;
        --green:        #22C55E;
        --red:          #EF4444;
        --hover:        #18181B;
        --hover-strong: #27272A;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}