/* =============================
   Sofrosyne.dk – Modern Minimal
   ============================= */

/* Design Tokens */
:root {
  --brand: #0e6f64; /* refined teal */
  --brand-rgb: 14 111 100;
  --brand-600: #0d9488;
  --brand-accent: #14b8a6;
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #64748b;
  --bg: #f8fafc;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --border: #e2e8f0;
  --radius-sm: .5rem;
  --radius: .75rem;
  --radius-lg: 1.25rem;
  --shadow-xs: 0 1px 2px rgba(0 0 0 / .05);
  --shadow-sm: 0 1px 3px rgba(0 0 0 / .08), 0 1px 2px rgba(0 0 0 / .04);
  --shadow-md: 0 4px 12px -2px rgba(15 23 42 / .10), 0 2px 4px rgba(15 23 42 / .06);
  --focus: 0 0 0 3px rgba(20 184 166 / .45);
  --transition: .5s cubic-bezier(.22,.61,.36,1);
}

/* Dark Mode Tokens */
[data-theme="dark"] {
  --bg: #0b1220;
  --bg-alt: #101b2d;
  --surface: #152638;
  --ink: #e2e8f0;
  --ink-soft: #94a3b8;
  --muted: #64748b;
  --border: #1e3145;
  --brand: #20c7b5;
  --brand-600: #2dd4bf;
  --brand-accent: #2dd4bf;
  --shadow-xs: 0 1px 2px rgba(0 0 0 / .4);
  --shadow-sm: 0 2px 4px rgba(0 0 0 / .5);
  --shadow-md: 0 8px 28px -6px rgba(0 0 0 / .55), 0 4px 8px rgba(0 0 0 / .5);
  --focus: 0 0 0 3px rgba(45 212 191 / .55);
  --hero-overlay: linear-gradient(180deg, rgba(3,14,20,.55), rgba(3,14,20,.75));
}

/* Base Reset / Typography Polish */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { background: var(--bg); color: var(--ink); font-feature-settings: "liga" on, "kern" on; }
body, h1, h2, h3, h4, h5, h6 { font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif; }
h1,h2,h3,h4 { line-height: 1.15; letter-spacing: -.02em; }
p { max-width: 70ch; }
::selection { background: var(--brand-accent); color: #fff; }

/* Fluid Type Scale (caps with tailwind classes preserved) */
@media (min-width:700px){
  h1 { font-size: clamp(2.75rem, 3.4rem, 3.6rem); }
}

/* Smooth transitions for themed elements */
body, .card, .hero::after, .quote-figure, header, footer, .nav a, .theme-toggle { transition: background-color .5s ease, color .45s ease, border-color .45s ease, box-shadow .5s ease; }

/* Unified dark backgrounds for utility classes present in HTML */
[data-theme="dark"] .bg-white { background: var(--surface) !important; }
[data-theme="dark"] .bg-gray-50 { background: var(--bg) !important; }
[data-theme="dark"] .bg-gray-100 { background: var(--bg-alt) !important; }
[data-theme="dark"] .shadow-sm { box-shadow: var(--shadow-sm) !important; }
[data-theme="dark"] .shadow-lg, [data-theme="dark"] .shadow { box-shadow: var(--shadow-md) !important; }

/* Dark mode utility text overrides (ensure sufficient contrast) */
[data-theme="dark"] .text-gray-900 { color: #f1f5f9 !important; }
[data-theme="dark"] .text-gray-800 { color: #e2e8f0 !important; }
[data-theme="dark"] .text-gray-700 { color: #cbd5e1 !important; }
[data-theme="dark"] .text-gray-600 { color: #94a3b8 !important; }
[data-theme="dark"] .text-gray-500 { color: #64748b !important; }
[data-theme="dark"] .text-teal-700 { color: var(--brand-600) !important; }

/* Navigation */
header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: linear-gradient(135deg, rgba(var(--brand-rgb)/.08), rgba(255 255 255 / .7)); border-bottom: 1px solid rgba(var(--brand-rgb)/.15); }
[data-theme="dark"] header { background: #0d1826; border-color: rgba(255 255 255 / .06); }
.nav a { position: relative; padding-block: .25rem; color: var(--ink-soft); }
[data-theme="dark"] .nav a { color: #cdd6e2; }
[data-theme="dark"] .nav a[aria-current="page"], [data-theme="dark"] .nav a.active { color: var(--brand-600); }
.nav a:hover { color: var(--brand-accent); }
.nav a[aria-current="page"], .nav a.active { color: var(--brand-600); }
.nav a::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background: linear-gradient(90deg,var(--brand),var(--brand-accent)); border-radius:2px; transition: width .35s ease; }
.nav a:hover::after, .nav a[aria-current="page"]::after, .nav a.active::after { width:100%; }

/* Theme toggle button */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; padding:0; border:1px solid transparent; background: radial-gradient(circle at 30% 30%, rgba(var(--brand-rgb)/.18), rgba(var(--brand-rgb)/.05)); color: var(--brand); font-size: .9rem; cursor: pointer; }
.theme-toggle:hover { background: radial-gradient(circle at 30% 30%, rgba(var(--brand-rgb)/.28), rgba(var(--brand-rgb)/.08)); box-shadow: var(--shadow-sm); }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--focus); }
[data-theme="dark"] .theme-toggle { color: var(--brand-600); }

/* Hero */
.hero { position:relative; isolation:isolate; overflow:hidden; border-radius: var(--radius-lg); min-height: clamp(320px, 50vh, 640px); background-image: var(--hero-image); background-size: cover; background-position:center; background-repeat:no-repeat; box-shadow: var(--shadow-md); }
/* Desaturated illustrative layer */
.hero::before { content:""; position:absolute; inset:0; background:inherit; background-image: var(--hero-image); background-size:cover; background-position:center; filter: grayscale(.9) contrast(1.05) brightness(.9); transform:scale(1.02); z-index:0; }
.hero::after { content:""; position:absolute; inset:0; background: linear-gradient(155deg, rgba(0,15,20,.70), rgba(0,30,36,.55) 35%, rgba(0,0,0,.35) 70%); mix-blend-mode: normal; pointer-events:none; z-index:1; }
[data-theme="dark"] .hero::after { background: var(--hero-overlay, linear-gradient(155deg, rgba(0,0,0,.78), rgba(0,0,0,.6) 40%, rgba(0,0,0,.45) 75%)); }
.hero .hero-content { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: clamp(1.5rem, 5vw, 3rem); text-align:center; color:#fff; text-shadow: 0 3px 14px rgba(0 0 0 / .65), 0 1px 3px rgba(0 0 0 /.45); }
.hero h1 { font-weight:800; }
.hero p { font-size: clamp(1rem, 1.15rem + .2vw, 1.35rem); font-weight:400; letter-spacing:.01em; }
.hero a { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); position:relative; z-index:3; }
.hero a:first-child { background: linear-gradient(135deg,var(--brand),var(--brand-accent)); border:none; box-shadow: 0 4px 18px -4px rgba(var(--brand-rgb)/.55), 0 2px 6px rgba(var(--brand-rgb)/.4); }
.hero a:first-child:hover { transform: translateY(-2px); box-shadow: 0 6px 24px -6px rgba(var(--brand-rgb)/.6), 0 3px 10px rgba(var(--brand-rgb)/.4); }
.hero a:nth-child(2) { background:rgba(255 255 255 / .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border:1px solid rgba(var(--brand-rgb)/.25); }
[data-theme="dark"] .hero a:nth-child(2) { background:rgba(34 51 72 / .65); color: #e2fdfb; border-color: rgba(var(--brand-rgb)/.45); }
.hero a:nth-child(2):hover { background:rgba(255 255 255 / .95); }
[data-theme="dark"] .hero a:nth-child(2):hover { background:rgba(15 23 42 / .75); }

/* Cards */
.card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); position:relative; overflow:hidden; }
.card::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 25% 15%, rgba(var(--brand-rgb)/.06), transparent 70%); opacity:0; transition: opacity .6s ease; }
.card:hover::before { opacity:1; }
.card:hover { box-shadow: var(--shadow-md); border-color: rgba(var(--brand-rgb)/.45); transform: translateY(-2px); }
.card { transition: box-shadow var(--transition), transform .6s cubic-bezier(.22,.61,.36,1), border-color .5s ease; }
.card .card-body { padding:1.75rem 1.75rem 1.9rem; }

[data-theme="dark"] .card { background: var(--surface); }
[data-theme="dark"] .card h2, [data-theme="dark"] .card p, [data-theme="dark"] .card li { color:#e5edf4; }
[data-theme="dark"] .card h2 { color:#ffffff; }

/* Gallery (structure from Tailwind classes) */
main .grid > div > img { transition: transform 1.1s cubic-bezier(.19,1,.22,1), filter .8s ease; filter: saturate(.9) contrast(1.05); }
main .grid > div:hover > img { transform: scale(1.06); filter: saturate(1.05) contrast(1.08); }
main .grid > div { border-radius: var(--radius); background: var(--surface); border:1px solid var(--border); position:relative; overflow:hidden; }
main .grid > div:hover { box-shadow: var(--shadow-md); }
main .grid > div > .p-4 { background: linear-gradient(180deg, rgba(255 255 255 / .92), rgba(255 255 255 / .85)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-top:1px solid rgba(var(--brand-rgb)/.12); }
[data-theme="dark"] main .grid > div > .p-4 { background: linear-gradient(180deg, rgba(21 38 56 / .82), rgba(21 38 56 / .78)); border-color: rgba(var(--brand-rgb)/.2); }

/* Quote Figures */
.quote-figure { display:flex; gap:1.25rem; align-items:flex-start; background: var(--surface); border:1px solid var(--border); border-left:4px solid var(--brand-600); border-radius: var(--radius); box-shadow: var(--shadow-xs); position:relative; overflow:hidden; }
.quote-figure:hover { box-shadow: var(--shadow-md); border-color: rgba(var(--brand-rgb)/.45); }
.quote-figure img { width:110px; height:110px; object-fit:cover; border-radius: var(--radius-sm); box-shadow: 0 2px 4px rgba(0 0 0 / .18); border:1px solid rgba(0 0 0 /.05); background:#fff; }
[data-theme="dark"] .quote-figure img { border-color: rgba(255 255 255 /.08); box-shadow: 0 2px 6px rgba(0 0 0 /.55); }
.quote-figure blockquote { margin:0; flex:1; }
.quote-figure blockquote p { font-size: .95rem; line-height:1.5; }
.quote-figure footer { font-size: .85rem; }

/* Footer */
footer { background: linear-gradient(180deg, rgba(var(--brand-rgb)/.05), rgba(var(--brand-rgb)/.02)); border-top:1px solid var(--border); }
[data-theme="dark"] footer { background: linear-gradient(180deg, rgba(var(--brand-rgb)/.15), rgba(var(--brand-rgb)/.06)); border-color: #1d2d42; }
[data-theme="dark"] footer, [data-theme="dark"] footer a { color:#93a4b7; }
[data-theme="dark"] footer a:hover { color:#ffffff; }

/* Utility Animations */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.animate-fadeIn { animation: fadeIn 1.1s ease-in forwards; }

/* Strong heading/body light text in dark mode */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color:#ffffff; }
[data-theme="dark"] body { color:#d9e2eb; }
[data-theme="dark"] p { color:#d0dae4; }
[data-theme="dark"] strong, [data-theme="dark"] b { color:#ffffff; }

/* Focus styles for accessible nav links (retain semantics) */
.nav a:focus-visible { outline: none; box-shadow: var(--focus); border-radius:4px; }

/* Mobile nav transition */
.nav #nav-links { transition: all .35s ease; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important; }
}