/*
* AroundU Locations — colors_and_type.css
* Copy this file into a design to get the base tokens + typographic styles.
*
* Base: Bootstrap 5 (Bootstrap Icons via CDN).
* Primary brand green: #198754 (Bootstrap $success).
* Accent red for radar/logo: #dc3545 (Bootstrap $danger).
*
* Usage:
*
*
*
*/
:root {
/* ── Brand ─────────────────────────────────────────────────────────── */
--au-green: #198754; /* primary action, brand accent, map pins */
--au-green-hover: #157347;
--au-green-active: #146c43;
--au-green-dark: #0f5c38; /* auth-header gradient end */
--au-green-subtle-bg: #d1e7dd; /* success-bg-subtle */
--au-green-subtle-fg: #0a3622; /* success-emphasis */
--au-blue: #0d6efd; /* "verified" dots, bewertung quick-action */
--au-blue-hover: #0b5ed7;
--au-red: #dc3545; /* radar logo, destructive actions, area colour */
--au-red-hover: #bb2d3b;
--au-amber: #f59e0b; /* rating stars (filled) */
/* ── Foregrounds / Neutrals ───────────────────────────────────────── */
--au-fg-1: #212529; /* body, headings */
--au-fg-2: #495057; /* secondary body */
--au-fg-3: #6c757d; /* captions / muted */
--au-fg-4: #adb5bd; /* placeholder */
--au-bg: #ffffff;
--au-bg-subtle: #f8f9fa;
--au-bg-secondary: #e9ecef;
--au-border: #dee2e6;
--au-border-subtle:#e9ecef;
/* Map canvas grey (Google Maps base) */
--au-map-canvas: #e8eaed;
/* ── Weather / Category icon tints ─────────────────────────────────── */
--au-weather-sun: #f59e0b;
--au-weather-cloud: #94a3b8;
--au-weather-rain: #3b82f6;
--au-weather-snow: #a5f3fc;
--au-weather-storm: #6366f1;
--au-weather-fog: #9ca3af;
/* ── Radii ─────────────────────────────────────────────────────────── */
--au-radius-sm: .4rem;
--au-radius: .5rem; /* default Bootstrap control radius */
--au-radius-card: .875rem; /* location cards, review items */
--au-radius-lg: 1rem; /* info-cards, hero image, section cards */
--au-radius-xl: 1.25rem; /* map wrapper */
--au-radius-pill: 2rem; /* filter pills, quick-action buttons, badges */
/* ── Shadows ───────────────────────────────────────────────────────── */
--au-shadow-xs: 0 1px 4px rgba(0,0,0,0.09); /* pill buttons */
--au-shadow-sm: 0 1px 6px rgba(0,0,0,0.10); /* navbar bottom */
--au-shadow-map: 0 4px 24px rgba(0,0,0,0.10); /* map wrapper */
--au-shadow-hover: 0 6px 24px rgba(0,0,0,0.10); /* card hover lift */
--au-shadow-pin: 0 2px 8px rgba(0,0,0,0.28); /* map pin default */
--au-shadow-pin-hover: 0 4px 14px rgba(0,0,0,0.35); /* map pin hover */
/* ── Spacing (Bootstrap rem-based) ─────────────────────────────────── */
--au-space-1: .25rem;
--au-space-2: .5rem;
--au-space-3: .75rem;
--au-space-4: 1rem;
--au-space-5: 1.25rem;
--au-space-6: 1.5rem;
--au-space-7: 2rem;
--au-space-8: 3rem;
/* ── Typography ────────────────────────────────────────────────────── */
--au-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
--au-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
/* Semantic type tokens — map to Bootstrap display & heading scale */
--au-display-size: 2.5rem; /* 40px — hero h1 (display-6) */
--au-display-weight: 700;
--au-h1-size: 1.75rem; /* 28px — .h3 used as page title */
--au-h2-size: 1.25rem; /* 20px — .h4 section */
--au-h3-size: 1.10rem; /* 17.6px — card title */
--au-h4-size: 1rem; /* 16px — .h6 small heading */
--au-body-size: 1rem;
--au-small-size: .875rem;
--au-xsmall-size:.78rem;
--au-tiny-size: .72rem; /* rating pills, meta */
--au-micro-size: .68rem; /* category badges */
--au-lh-tight: 1.2;
--au-lh-base: 1.5;
--au-lh-relaxed:1.7;
}
[data-bs-theme="dark"] {
--au-fg-1: #f8f9fa;
--au-fg-2: #dee2e6;
--au-fg-3: #adb5bd;
--au-bg: #212529;
--au-bg-subtle: #2a2f33;
--au-bg-secondary: #343a40;
--au-border: #495057;
--au-border-subtle:#343a40;
--au-green-subtle-bg: #0a3622;
--au-green-subtle-fg: #a3cfbb;
}
/* ── Semantic text styles ──────────────────────────────────────────────── */
body, .au-body {
font-family: var(--au-font-sans);
font-size: var(--au-body-size);
line-height: var(--au-lh-base);
color: var(--au-fg-1);
}
.au-display {
font-family: var(--au-font-sans);
font-size: var(--au-display-size);
line-height: var(--au-lh-tight);
font-weight: var(--au-display-weight);
letter-spacing: -0.02em;
color: var(--au-fg-1);
}
.au-h1, h1.au { font-size: var(--au-h1-size); font-weight: 700; line-height: 1.25; color: var(--au-fg-1); }
.au-h2, h2.au { font-size: var(--au-h2-size); font-weight: 700; line-height: 1.3; color: var(--au-fg-1); }
.au-h3, h3.au { font-size: var(--au-h3-size); font-weight: 700; line-height: 1.3; color: var(--au-fg-1); }
.au-h4, h4.au { font-size: var(--au-h4-size); font-weight: 600; line-height: 1.35; color: var(--au-fg-1); }
.au-lead { font-size: 1.125rem; font-weight: 400; color: var(--au-fg-2); line-height: 1.45; }
.au-small { font-size: var(--au-small-size); }
.au-xsmall { font-size: var(--au-xsmall-size); font-weight: 500; }
.au-meta { font-size: var(--au-tiny-size); color: var(--au-fg-3); }
.au-caption { font-size: var(--au-micro-size); font-weight: 600; letter-spacing: .01em; }
.au-code, code.au {
font-family: var(--au-font-mono);
font-size: .875em;
background: var(--au-bg-secondary);
padding: .1em .35em;
border-radius: .25rem;
color: var(--au-fg-1);
}
.au-muted { color: var(--au-fg-3); }
/* ── Common capsule / pill primitive ───────────────────────────────────── */
.au-pill {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: var(--au-xsmall-size);
font-weight: 600;
padding: .3rem .85rem;
border-radius: var(--au-radius-pill);
border: 1px solid var(--au-border);
background: var(--au-bg);
color: var(--au-fg-1);
white-space: nowrap;
line-height: 1;
}
.au-pill.is-active,
.au-pill--green {
background: var(--au-green);
color: #fff;
border-color: var(--au-green);
}
.au-pill--blue {
background: var(--au-blue);
color: #fff;
border-color: var(--au-blue);
}
/* ── Brand gradient (auth headers) ─────────────────────────────────────── */
.au-brand-gradient {
background: linear-gradient(135deg, var(--au-green) 0%, var(--au-green-dark) 100%);
color: #fff;
}