@charset "utf-8";

@use 'reset';
@use 'leaflet';

@use 'forms';
@use 'animations';
@use 'buttons';
@use 'card';
@use 'map';

@use 'radix/toast';
@use 'radix/dialog';

:root {
    --white: #fff;
    --black: #111;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;
    --red-500: #dc2626;
    --red-700: #b60909;
    --green-500: #16a34a;
    --green-700: #15803d;
    --blue-300: #55c9ff;
    --blue-500: #0ea5e9;
    --blue-700: #0284c7;
    --orange-500: #f97316;
    --orange-700: #c2410c;
    --purple-500: #8b5cf6;
    --purple-700: #6d28d9;
}

html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--slate-900);
}

a[href^='http'] {
    padding-right: 1.25em;
}

a[href^='http']::after {
    position: absolute;
    content: url('/icon/square-arrow-out.svg');
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: .25em;
}

strong {
    font-weight: 600;
}

.icon {
    width: 1em;
}