/* ============================================================
   iOS design system — polekar.com
   Light-first, apple.com-style surfaces, iOS system colors.
   Re-skins the existing Tailwind utility classes in place.
   ============================================================ */

:root {
    --ios-bg: #f5f5f7;
    --ios-card: rgba(255, 255, 255, 0.55);
    --ios-card-opaque: #ffffff;
    --ios-elev: rgba(255, 255, 255, 0.72);
    --ios-text: #1d1d1f;
    --ios-text-2: #3a3a3c;
    --ios-text-3: #6e6e73;
    --ios-text-4: #6e6e73;
    --ios-text-5: #6e6e73;
    --ios-accent: #0066cc;
    --ios-accent-hover: #0058b2;
    --ios-green: #1f7a34;
    --ios-purple: #6d28d9;
    --ios-cyan: #155e75;
    --ios-orange: #9a3412;
    --ios-amber: #92400e;
    --ios-yellow: #854d0e;
    --ios-indigo: #4338ca;
    --ios-red: #991b1b;
    --ios-pink: #9d174d;
    --ios-hairline: rgba(0, 0, 0, 0.08);
    --ios-hairline-soft: rgba(255, 255, 255, 0.5);
    --ios-glass: rgba(255, 255, 255, 0.6);
    --ios-glass-2: rgba(255, 255, 255, 0.45);
    --ios-fill: rgba(120, 120, 128, 0.12);
    --ios-fill-2: rgba(120, 120, 128, 0.22);
    --ios-fill-accent: rgba(0, 122, 255, 0.10);
    --ios-fill-accent-2: rgba(0, 122, 255, 0.30);
    --ios-track: rgba(120, 120, 128, 0.2);
    --ios-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    --ios-shadow-strong: 0 8px 40px rgba(0, 0, 0, 0.1);
}

html.dark {
    --ios-bg: #000000;
    --ios-card: rgba(28, 28, 30, 0.55);
    --ios-card-opaque: #1c1c1e;
    --ios-elev: rgba(44, 44, 46, 0.72);
    --ios-text: #f5f5f7;
    --ios-text-2: #d1d1d6;
    --ios-text-3: #98989d;
    --ios-text-4: #98989d;
    --ios-text-5: #98989d;
    --ios-accent: #0a84ff;
    --ios-accent-hover: #3395ff;
    --ios-green: #30d158;
    --ios-purple: #c084fc;
    --ios-cyan: #22d3ee;
    --ios-orange: #fb923c;
    --ios-amber: #fbbf24;
    --ios-yellow: #facc15;
    --ios-indigo: #a5b4fc;
    --ios-red: #f87171;
    --ios-pink: #f472b6;
    --ios-hairline: rgba(255, 255, 255, 0.14);
    --ios-hairline-soft: rgba(255, 255, 255, 0.08);
    --ios-glass: rgba(22, 22, 24, 0.6);
    --ios-glass-2: rgba(28, 28, 30, 0.45);
    --ios-fill: rgba(120, 120, 128, 0.22);
    --ios-fill-2: rgba(120, 120, 128, 0.32);
    --ios-fill-accent: rgba(10, 132, 255, 0.18);
    --ios-fill-accent-2: rgba(10, 132, 255, 0.40);
    --ios-track: #39393d;
    --ios-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    --ios-shadow-strong: 0 8px 40px rgba(0, 0, 0, 0.65);
}

/* ---------- Typography (SF system stack) ---------- */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html,
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter",
        system-ui, "Segoe UI", Roboto, sans-serif !important;
}

.font-display,
h1,
h2,
h3 {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter",
        system-ui, sans-serif !important;
    letter-spacing: -0.022em !important;
}

.font-mono {
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
}

nav a.font-mono {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif !important;
}

nav a.font-mono::after {
    content: none !important; /* no terminal cursor on the brand name */
}

/* ---------- Surfaces ---------- */

body {
    background-color: var(--ios-bg) !important;
    color: var(--ios-text-2) !important;
}

.bg-slate-900 {
    background-color: var(--ios-bg) !important;
}

.bg-slate-800\/50 {
    background-color: var(--ios-card) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid var(--ios-hairline) !important;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.08) !important;
    border-top-color: var(--ios-hairline-soft) !important;
}

.bg-slate-900\/50 {
    background-color: var(--ios-glass-2) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
}

.bg-slate-900\/80 {
    background-color: var(--ios-glass) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    border-bottom-color: var(--ios-hairline) !important;
}

nav.bg-slate-900\/80 {
    box-shadow: 0 1px 0 var(--ios-hairline-soft);
}

.bg-slate-700 {
    background-color: var(--ios-track) !important;
}

.bg-white\/10 {
    background-color: var(--ios-fill) !important;
}

.bg-white\/20 {
    background-color: var(--ios-fill-2) !important;
}

/* ---------- Text ---------- */

.text-white {
    color: var(--ios-text) !important;
}

.bg-emerald-500.text-white,
.bg-emerald-400.text-white,
.bg-emerald-600.text-white,
.bg-blue-500.text-white,
.bg-blue-600.text-white,
.bg-green-500.text-white,
.bg-green-600.text-white {
    color: #ffffff !important;
}

.text-slate-100,
.text-slate-200,
.text-slate-300 {
    color: var(--ios-text-2) !important;
}

.text-slate-400 {
    color: var(--ios-text-3) !important;
}

.text-slate-500 {
    color: var(--ios-text-3) !important;
}

.text-slate-600 {
    color: var(--ios-text-5) !important;
}

.hover\:text-white:hover {
    color: var(--ios-text) !important;
}

.text-emerald-300,
.text-emerald-400,
.text-emerald-500,
.text-blue-300,
.text-blue-400 {
    color: var(--ios-accent) !important;
}

.text-green-400,
.text-green-500 {
    color: var(--ios-green) !important;
}

.text-purple-400 {
    color: var(--ios-purple) !important;
}

.text-cyan-400 {
    color: var(--ios-cyan) !important;
}

.text-orange-400 {
    color: var(--ios-orange) !important;
}

.text-amber-400,
.text-amber-500 {
    color: var(--ios-amber) !important;
}

.text-yellow-400,
.text-yellow-500 {
    color: var(--ios-yellow) !important;
}

.text-indigo-200,
.text-indigo-300,
.text-indigo-400 {
    color: var(--ios-indigo) !important;
}

.text-red-400,
.text-red-500 {
    color: var(--ios-red) !important;
}

.text-pink-400 {
    color: var(--ios-pink) !important;
}

section p a:not(.px-4):not(.px-7):not(.px-8),
article p a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hover\:text-emerald-400:hover,
.hover\:text-blue-400:hover {
    color: var(--ios-accent) !important;
}

/* ---------- Accent surfaces ---------- */

.bg-emerald-400,
.bg-blue-400,
.bg-blue-500,
.bg-blue-600 {
    background-color: var(--ios-accent) !important;
}

.bg-emerald-500 {
    background-color: var(--ios-accent) !important;
    border-radius: 999px !important;
}

.bg-emerald-600 {
    background-color: var(--ios-accent-hover) !important;
}

.bg-indigo-500.text-white {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}

.hover\:bg-emerald-400:hover {
    background-color: var(--ios-accent) !important;
}

.hover\:bg-emerald-600:hover {
    background-color: var(--ios-accent-hover) !important;
}

.hover\:bg-white\/10:hover {
    background-color: var(--ios-fill-2) !important;
}

.bg-emerald-400\/10,
.bg-emerald-500\/10,
.bg-emerald-500\/15,
.bg-emerald-500\/20,
.bg-blue-400\/10,
.bg-blue-500\/10,
.bg-blue-500\/15,
.bg-blue-500\/20 {
    background-color: var(--ios-fill-accent) !important;
}

.bg-emerald-400\/40,
.bg-emerald-500\/40,
.bg-blue-400\/40,
.bg-blue-500\/40 {
    background-color: var(--ios-fill-accent-2) !important;
}

.bg-green-500,
.bg-green-600 {
    background-color: var(--ios-green) !important;
}

/* ---------- Borders ---------- */

.border-white\/5,
.border-white\/10,
.border-slate-700,
.border-slate-800 {
    border-color: var(--ios-hairline) !important;
}

.border-emerald-500,
.border-emerald-500\/40,
.border-emerald-500\/50,
.border-blue-500,
.border-blue-500\/50 {
    border-color: var(--ios-fill-accent-2) !important;
}

/* ---------- Existing custom components ---------- */

.glass {
    background: var(--ios-glass-2) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid var(--ios-hairline) !important;
    border-top-color: var(--ios-hairline-soft) !important;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.06) !important;
}

.hover-glow:hover {
    box-shadow: 0 8px 40px rgba(0, 122, 255, 0.25) !important;
}

html.dark .hover-glow:hover {
    box-shadow: 0 8px 40px rgba(10, 132, 255, 0.35) !important;
}

.card-hover {
    border-radius: 18px !important;
}

.card-hover:hover {
    border-color: var(--ios-fill-accent-2) !important;
}

.gradient-text {
    background-image: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html.dark .gradient-text {
    background-image: linear-gradient(135deg, #0a84ff 0%, #64d2ff 100%) !important;
}

.timeline-line {
    background: linear-gradient(180deg, #007aff 0%, #5ac8fa 100%) !important;
}

html.dark .timeline-line {
    background: linear-gradient(180deg, #0a84ff 0%, #64d2ff 100%) !important;
}

/* Atmospheric layers */

html {
    background-color: var(--ios-bg);
}

/* Body stays transparent so the ambient blobs (body::before) show through.
   The solid page color still applies to any other .bg-slate-900 element
   (e.g. modal panels), which remain opaque. */
body.bg-slate-900 {
    background-color: transparent !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42% 32% at 85% 6%, rgba(0, 122, 255, 0.16), transparent 65%),
        radial-gradient(36% 30% at 8% 28%, rgba(90, 200, 250, 0.14), transparent 65%),
        radial-gradient(32% 28% at 92% 60%, rgba(175, 82, 222, 0.11), transparent 65%),
        radial-gradient(40% 32% at 12% 92%, rgba(255, 149, 0, 0.09), transparent 65%),
        radial-gradient(30% 24% at 55% 45%, rgba(52, 199, 89, 0.07), transparent 65%);
}

html.dark body::before {
    background:
        radial-gradient(42% 32% at 85% 6%, rgba(10, 132, 255, 0.14), transparent 65%),
        radial-gradient(36% 30% at 8% 28%, rgba(90, 200, 250, 0.08), transparent 65%),
        radial-gradient(32% 28% at 92% 60%, rgba(191, 90, 242, 0.10), transparent 65%),
        radial-gradient(40% 32% at 12% 92%, rgba(255, 60, 172, 0.06), transparent 65%);
}

.bg-grid {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px) !important;
}

html.dark .bg-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
}

::selection {
    background: var(--ios-accent) !important;
    color: #ffffff !important;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--ios-bg);
}

::-webkit-scrollbar-thumb {
    background: #c7c7cc;
    border-radius: 8px;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #48484a;
}

::-webkit-scrollbar-thumb:hover {
    background: #aeaeb2;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #636366;
}

/* ---------- iOS rounding ---------- */

.rounded-lg {
    border-radius: 14px !important;
}

.rounded-xl {
    border-radius: 18px !important;
}

.rounded-2xl {
    border-radius: 26px !important;
}

img.rounded-lg,
img.rounded-xl,
img.rounded-2xl {
    border-radius: 16px !important;
}

/* ---------- Theme toggle (injected) ---------- */

.ios-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    margin-left: 14px;
    border-radius: 50%;
    border: 1px solid var(--ios-hairline);
    background: var(--ios-card);
    color: var(--ios-text-3);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ios-theme-toggle:hover {
    background: var(--ios-fill);
    color: var(--ios-text);
}

.ios-theme-toggle svg,
.ios-theme-toggle i {
    pointer-events: none;
}

/* Keep transitions off non-interactive containers; the theme toggle has its own. */